Skip to content

Commit 4e3461a

Browse files
authored
[Shared UX] Markdown Component (#142228)
1 parent 75f2d0c commit 4e3461a

29 files changed

+1123
-0
lines changed

.github/CODEOWNERS

+3
Original file line numberDiff line numberDiff line change
@@ -990,6 +990,9 @@ packages/shared-ux/card/no_data/types @elastic/shared-ux
990990
packages/shared-ux/link/redirect_app/impl @elastic/shared-ux
991991
packages/shared-ux/link/redirect_app/mocks @elastic/shared-ux
992992
packages/shared-ux/link/redirect_app/types @elastic/shared-ux
993+
packages/shared-ux/markdown/impl @elastic/shared-ux
994+
packages/shared-ux/markdown/mocks @elastic/shared-ux
995+
packages/shared-ux/markdown/types @elastic/shared-ux
993996
packages/shared-ux/page/analytics_no_data/impl @elastic/shared-ux
994997
packages/shared-ux/page/analytics_no_data/mocks @elastic/shared-ux
995998
packages/shared-ux/page/analytics_no_data/types @elastic/shared-ux

package.json

+6
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,9 @@
373373
"@kbn/shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app/impl",
374374
"@kbn/shared-ux-link-redirect-app-mocks": "link:bazel-bin/packages/shared-ux/link/redirect_app/mocks",
375375
"@kbn/shared-ux-link-redirect-app-types": "link:bazel-bin/packages/shared-ux/link/redirect_app/types",
376+
"@kbn/shared-ux-markdown": "link:bazel-bin/packages/shared-ux/markdown/impl",
377+
"@kbn/shared-ux-markdown-mocks": "link:bazel-bin/packages/shared-ux/markdown/mocks",
378+
"@kbn/shared-ux-markdown-types": "link:bazel-bin/packages/shared-ux/markdown/types",
376379
"@kbn/shared-ux-page-analytics-no-data": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/impl",
377380
"@kbn/shared-ux-page-analytics-no-data-mocks": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/mocks",
378381
"@kbn/shared-ux-page-analytics-no-data-types": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/types",
@@ -1133,6 +1136,9 @@
11331136
"@types/kbn__shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app/impl/npm_module_types",
11341137
"@types/kbn__shared-ux-link-redirect-app-mocks": "link:bazel-bin/packages/shared-ux/link/redirect_app/mocks/npm_module_types",
11351138
"@types/kbn__shared-ux-link-redirect-app-types": "link:bazel-bin/packages/shared-ux/link/redirect_app/types/npm_module_types",
1139+
"@types/kbn__shared-ux-markdown": "link:bazel-bin/packages/shared-ux/markdown/impl/npm_module_types",
1140+
"@types/kbn__shared-ux-markdown-mocks": "link:bazel-bin/packages/shared-ux/markdown/mocks/npm_module_types",
1141+
"@types/kbn__shared-ux-markdown-types": "link:bazel-bin/packages/shared-ux/markdown/types/npm_module_types",
11361142
"@types/kbn__shared-ux-page-analytics-no-data": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/impl/npm_module_types",
11371143
"@types/kbn__shared-ux-page-analytics-no-data-mocks": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/mocks/npm_module_types",
11381144
"@types/kbn__shared-ux-page-analytics-no-data-types": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/types/npm_module_types",

packages/BUILD.bazel

+6
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,9 @@ filegroup(
316316
"//packages/shared-ux/link/redirect_app/impl:build",
317317
"//packages/shared-ux/link/redirect_app/mocks:build",
318318
"//packages/shared-ux/link/redirect_app/types:build",
319+
"//packages/shared-ux/markdown/impl:build",
320+
"//packages/shared-ux/markdown/mocks:build",
321+
"//packages/shared-ux/markdown/types:build",
319322
"//packages/shared-ux/page/analytics_no_data/impl:build",
320323
"//packages/shared-ux/page/analytics_no_data/mocks:build",
321324
"//packages/shared-ux/page/analytics_no_data/types:build",
@@ -641,6 +644,9 @@ filegroup(
641644
"//packages/shared-ux/card/no_data/mocks:build_types",
642645
"//packages/shared-ux/link/redirect_app/impl:build_types",
643646
"//packages/shared-ux/link/redirect_app/mocks:build_types",
647+
"//packages/shared-ux/markdown/impl:build_types",
648+
"//packages/shared-ux/markdown/mocks:build_types",
649+
"//packages/shared-ux/markdown/types:build_types",
644650
"//packages/shared-ux/page/analytics_no_data/impl:build_types",
645651
"//packages/shared-ux/page/analytics_no_data/mocks:build_types",
646652
"//packages/shared-ux/page/kibana_no_data/impl:build_types",
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
load("@npm//@bazel/typescript:index.bzl", "ts_config")
2+
load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
3+
load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
4+
5+
PKG_DIRNAME = "impl"
6+
PKG_REQUIRE_NAME = "@kbn/shared-ux-markdown"
7+
8+
SOURCE_FILES = glob(
9+
[
10+
"**/*.ts",
11+
"**/*.tsx",
12+
"**/*.mdx",
13+
],
14+
exclude = [
15+
"**/*.config.js",
16+
"**/*.mock.*",
17+
"**/*.test.*",
18+
"**/*.stories.*",
19+
"**/__snapshots__/**",
20+
"**/integration_tests/**",
21+
"**/mocks/**",
22+
"**/scripts/**",
23+
"**/storybook/**",
24+
"**/test_fixtures/**",
25+
"**/test_helpers/**",
26+
],
27+
)
28+
29+
SRCS = SOURCE_FILES
30+
31+
filegroup(
32+
name = "srcs",
33+
srcs = SRCS,
34+
)
35+
36+
NPM_MODULE_EXTRA_FILES = [
37+
"package.json",
38+
]
39+
40+
# In this array place runtime dependencies, including other packages and NPM packages
41+
# which must be available for this code to run.
42+
#
43+
# To reference other packages use:
44+
# "//repo/relative/path/to/package"
45+
# eg. "//packages/kbn-utils"
46+
#
47+
# To reference a NPM package use:
48+
# "@npm//name-of-package"
49+
# eg. "@npm//lodash"
50+
RUNTIME_DEPS = [
51+
"@npm//react",
52+
"@npm//enzyme",
53+
"@npm//@elastic/eui",
54+
"//packages/kbn-ambient-ui-types",
55+
]
56+
57+
# In this array place dependencies necessary to build the types, which will include the
58+
# :npm_module_types target of other packages and packages from NPM, including @types/*
59+
# packages.
60+
#
61+
# To reference the types for another package use:
62+
# "//repo/relative/path/to/package:npm_module_types"
63+
# eg. "//packages/kbn-utils:npm_module_types"
64+
#
65+
# References to NPM packages work the same as RUNTIME_DEPS
66+
TYPES_DEPS = [
67+
"@npm//@types/node",
68+
"@npm//@types/jest",
69+
"@npm//@types/react",
70+
"@npm//@elastic/eui",
71+
"//packages/kbn-ambient-ui-types",
72+
"//packages/kbn-shared-ux-utility:npm_module_types",
73+
"//packages/shared-ux/markdown/mocks",
74+
# "//packages/kbn-shared-ux-markdown-mocks:npm_module_types",
75+
]
76+
77+
jsts_transpiler(
78+
name = "target_node",
79+
srcs = SRCS,
80+
build_pkg_name = package_name(),
81+
)
82+
83+
jsts_transpiler(
84+
name = "target_web",
85+
srcs = SRCS,
86+
build_pkg_name = package_name(),
87+
web = True,
88+
additional_args = [
89+
"--copy-files",
90+
"--quiet"
91+
],
92+
)
93+
94+
ts_config(
95+
name = "tsconfig",
96+
src = "tsconfig.json",
97+
deps = [
98+
"//:tsconfig.base.json",
99+
"//:tsconfig.bazel.json",
100+
],
101+
)
102+
103+
ts_project(
104+
name = "tsc_types",
105+
args = ['--pretty'],
106+
srcs = SRCS,
107+
deps = TYPES_DEPS,
108+
declaration = True,
109+
declaration_map = True,
110+
emit_declaration_only = True,
111+
out_dir = "target_types",
112+
tsconfig = ":tsconfig",
113+
)
114+
115+
js_library(
116+
name = PKG_DIRNAME,
117+
srcs = NPM_MODULE_EXTRA_FILES,
118+
deps = RUNTIME_DEPS + [":target_node", ":target_web"],
119+
package_name = PKG_REQUIRE_NAME,
120+
visibility = ["//visibility:public"],
121+
)
122+
123+
pkg_npm(
124+
name = "npm_module",
125+
deps = [":" + PKG_DIRNAME],
126+
)
127+
128+
filegroup(
129+
name = "build",
130+
srcs = [":npm_module"],
131+
visibility = ["//visibility:public"],
132+
)
133+
134+
pkg_npm_types(
135+
name = "npm_module_types",
136+
srcs = SRCS,
137+
deps = [":tsc_types"],
138+
package_name = PKG_REQUIRE_NAME,
139+
tsconfig = ":tsconfig",
140+
visibility = ["//visibility:public"],
141+
)
142+
143+
filegroup(
144+
name = "build_types",
145+
srcs = [":npm_module_types"],
146+
visibility = ["//visibility:public"],
147+
)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
id: sharedUX/Components/Markdown
3+
slug: /shared-ux/components/markdown
4+
title: Markdown
5+
description: A wrapper around EuiMarkdownEditor and EuiMarkdownFormat.
6+
tags: ['shared-ux', 'component']
7+
date: 2022-10-03
8+
---
9+
10+
## Description
11+
12+
This markdown component uses the **EuiMarkdownEditor** and **EuiMarkdownFormat** managed by `@elastic/eui`. If `readOnly` is set to true, and `markdownContent` or `children` are set, then the component renders **EuiMarkdownFormat** text. Otherwise the component will render the **EuiMarkdownEditor**. The height of the component can be set, but in order the control the width of the component, you can place the `<Markdown />` component in another component.
13+
Markdown extends all the EuiMarkdownEditorProps except for the `editorId`, `uiPlugins`, and `MarkdownFormatProps`.
14+
15+
## Component Properties
16+
17+
| Prop Name | Type | Description |
18+
|---|---|---|
19+
| `readOnly` | `boolean` | Needed to differentiate where markdown is used as a presentation of error messages. This was previous the MarkdownSimple component |
20+
| `openLinksInNewTab` | `boolean` | An optional property needed to replace the Markdown component from kibana-react |
21+
|`markdownContent` | `string` | This prop can be set along with `readOnly` to display error.message etc text to the kibana user. This property is optional. |
22+
| `ariaLabelContent` | `string` | An optional property to be set for the markdown component. It will be `markdown component` if not set explicitly. |
23+
| `height` | `number` or `'full'` | The height of the markdown component can be set to a number. By default, height is set to `'full'`. To set the width, include a container for the markdown component to be within with set width. |
24+
| `placeholder` | `string` or `undefined` | This prop can be set to a string to display the placeholder content of the markdown component. |
25+
| `defaultValue` | `string` | The default value for the markdown editor. If not set it will default to an empty string. |
26+
27+
## API
28+
29+
| Export | Description |
30+
|---|---|
31+
| `Markdown` | This component provides a markdown editor or text to be supported with Markdown formatting (must have static content set for the `markdownContent`) prop and be `readOnly` |
32+
| `MarkdownProps` | Exported by `@kbn/shared-ux-markdown-types` |
33+

0 commit comments

Comments
 (0)