@knime/kds-rich-text-editor 6.2.0 → 6.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @knime/kds-rich-text-editor
2
2
 
3
+ ## 6.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - @knime/kds-components@6.3.1
8
+ - @knime/kds-styles@6.3.1
9
+
10
+ ## 6.3.0
11
+
12
+ ### Patch Changes
13
+
14
+ - @knime/kds-components@6.3.0
15
+ - @knime/kds-styles@6.3.0
16
+
3
17
  ## 6.2.0
4
18
 
5
19
  ### Patch Changes
package/dist/index.css CHANGED
@@ -27,7 +27,7 @@
27
27
  }
28
28
 
29
29
  .editor-wrapper {
30
- &[data-v-efb3c9b4] {
30
+ &[data-v-a230bf6c] {
31
31
  /* Fixed 44px toolbar height per the design (28px content + 8px padding on
32
32
  * each side); the small toolbar buttons (24px) center within the content
33
33
  * area. */
@@ -39,32 +39,32 @@
39
39
  position: relative;
40
40
  isolation: isolate;
41
41
  }
42
- &.disabled[data-v-efb3c9b4] {
42
+ &.disabled[data-v-a230bf6c] {
43
43
  color: var(--kds-color-text-and-icon-disabled);
44
44
  }
45
45
  }
46
46
 
47
47
  /* stylelint-disable selector-class-pattern */
48
48
  .rich-text-editor {
49
- &[data-v-efb3c9b4] {
49
+ &[data-v-a230bf6c] {
50
50
  height: 100%;
51
- max-height: var(--v9c50ae14);
51
+ max-height: var(--v3c79e33b);
52
52
  overflow-y: auto;
53
53
 
54
54
  /* stylelint-disable knime/no-deep-nesting */
55
55
  /* stylelint-enable selector-class-pattern */
56
56
  }
57
57
  &.editable {
58
- &[data-v-efb3c9b4] {
58
+ &[data-v-a230bf6c] {
59
59
  padding: var(--kds-spacing-container-0-5x);
60
60
  cursor: text;
61
61
  background: var(--kds-color-background-input-initial);
62
62
  }
63
- &[data-v-efb3c9b4] .ProseMirror {
64
- min-height: var(--v4e013170);
63
+ &[data-v-a230bf6c] .ProseMirror {
64
+ min-height: var(--v63a1a18d);
65
65
  }
66
66
  }
67
- &[data-v-efb3c9b4] .ProseMirror {
67
+ &[data-v-a230bf6c] .ProseMirror {
68
68
  height: 100%;
69
69
  font: var(--kds-font-base-body-small);
70
70
 
@@ -90,6 +90,16 @@ i,
90
90
  em {
91
91
  font-style: italic;
92
92
  }
93
+ h1 {
94
+ margin: 0;
95
+ font: var(--kds-font-base-display-small);
96
+ color: var(--kds-color-text-and-icon-neutral);
97
+ }
98
+ h2 {
99
+ margin: 0;
100
+ font: var(--kds-font-base-display-xsmall);
101
+ color: var(--kds-color-text-and-icon-neutral);
102
+ }
93
103
  h3 {
94
104
  margin: 0;
95
105
  font: var(--kds-font-base-body-medium-strong);
@@ -98,6 +108,35 @@ h4 {
98
108
  margin: 0;
99
109
  font: var(--kds-font-base-body-small-strong);
100
110
  }
111
+ h5 {
112
+ margin: 0;
113
+ font: var(--kds-font-base-title-small-strong);
114
+ color: var(--kds-color-text-and-icon-neutral);
115
+ }
116
+ h6 {
117
+ margin: 0;
118
+ font: var(--kds-font-base-title-small);
119
+ color: var(--kds-color-text-and-icon-neutral);
120
+ }
121
+ blockquote {
122
+ & {
123
+ position: relative;
124
+ padding-left: var(--kds-spacing-container-1x);
125
+ margin-left: var(--kds-spacing-container-1x);
126
+ }
127
+ &::before {
128
+ position: absolute;
129
+ left: 0;
130
+ width: var(--kds-dimension-component-width-0-25x);
131
+ height: 100%;
132
+ content: "";
133
+ background-color: var(--kds-color-border-subtle);
134
+ border-radius: var(--kds-border-radius-container-pill);
135
+ }
136
+ & p:last-child {
137
+ margin-bottom: 0;
138
+ }
139
+ }
101
140
  pre {
102
141
  & {
103
142
  width: fit-content;
@@ -175,7 +214,7 @@ a {
175
214
  margin-left: var(--kds-spacing-container-0-12x);
176
215
  content: "";
177
216
  background-color: var(--link-color);
178
- mask-image: var(--v0f827314);
217
+ mask-image: var(--f8ef0ace);
179
218
  mask-repeat: no-repeat;
180
219
  mask-size: contain;
181
220
  }
@@ -224,34 +263,34 @@ td {
224
263
  }
225
264
  }
226
265
  }
227
- &[data-v-efb3c9b4] .ProseMirror:focus-visible,
228
- &[data-v-efb3c9b4] .ProseMirror:focus {
266
+ &[data-v-a230bf6c] .ProseMirror:focus-visible,
267
+ &[data-v-a230bf6c] .ProseMirror:focus {
229
268
  outline: transparent;
230
269
  }
231
270
  }
232
271
  .editor-wrapper.with-border {
233
- &[data-v-efb3c9b4] {
272
+ &[data-v-a230bf6c] {
234
273
  border: var(--kds-border-action-input);
235
274
  border-radius: var(--kds-border-radius-container-0-37x);
236
275
  }
237
- &.disabled[data-v-efb3c9b4] {
276
+ &.disabled[data-v-a230bf6c] {
238
277
  border: var(--kds-border-action-disabled);
239
278
  }
240
- & .toolbar-wrapper[data-v-efb3c9b4] {
279
+ & .toolbar-wrapper[data-v-a230bf6c] {
241
280
  border-top-left-radius: var(--kds-border-radius-container-0-37x);
242
281
  border-top-right-radius: var(--kds-border-radius-container-0-37x);
243
282
  }
244
- & .rich-text-editor[data-v-efb3c9b4] {
283
+ & .rich-text-editor[data-v-a230bf6c] {
245
284
  border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
246
285
  border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
247
286
  }
248
287
  }
249
- .editor-wrapper.show-focus-ring[data-v-efb3c9b4] {
288
+ .editor-wrapper.show-focus-ring[data-v-a230bf6c] {
250
289
  outline: var(--kds-border-action-focused);
251
290
  outline-offset: var(--kds-spacing-offset-focus);
252
291
  }
253
292
  .embedded-toolbar {
254
- &[data-v-efb3c9b4] {
293
+ &[data-v-a230bf6c] {
255
294
  height: var(--toolbar-height);
256
295
  padding: var(--kds-spacing-container-0-5x);
257
296
  overflow-x: auto;
@@ -262,7 +301,7 @@ td {
262
301
  border-bottom: var(--kds-border-base-muted);
263
302
  -ms-overflow-style: none; /* needed to hide scroll bar in edge */
264
303
  }
265
- &[data-v-efb3c9b4]::-webkit-scrollbar {
304
+ &[data-v-a230bf6c]::-webkit-scrollbar {
266
305
  display: none;
267
306
  }
268
307
  }
package/dist/index.js CHANGED
@@ -3179,11 +3179,11 @@ var KdsRichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
3179
3179
  emits: /*@__PURE__*/ mergeModels(["blur"], ["update:modelValue"]),
3180
3180
  setup(__props, { expose: __expose, emit: __emit }) {
3181
3181
  useCssVars((_ctx) => ({
3182
- "v9c50ae14": maxHeightStyle.value,
3183
- "v4e013170": minHeightStyle.value,
3184
- "v0f827314": externalIcon
3182
+ "v3c79e33b": maxHeightStyle.value,
3183
+ "v63a1a18d": minHeightStyle.value,
3184
+ "f8ef0ace": externalIcon
3185
3185
  }));
3186
- const hardCharacterLimit = Math.max(__props.characterLimit.maxCharacters ?? 1e3, MIN_CHARACTER_LIMIT);
3186
+ const hardCharacterLimit = __props.editable ? Math.max(__props.characterLimit.maxCharacters ?? 1e3, MIN_CHARACTER_LIMIT) : Infinity;
3187
3187
  const characterCountDisplay = __props.characterLimit.display ?? kdsCharacterCountDisplay.NEVER;
3188
3188
  const slots = useSlots();
3189
3189
  const externalIcon = `url("${external_link_default}")`;
@@ -3351,7 +3351,7 @@ var KdsRichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
3351
3351
  ])]);
3352
3352
  };
3353
3353
  }
3354
- }), [["__scopeId", "data-v-efb3c9b4"]]);
3354
+ }), [["__scopeId", "data-v-a230bf6c"]]);
3355
3355
  //#endregion
3356
3356
  //#region src/KdsRichTextInput.vue
3357
3357
  var KdsRichTextInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({