@shelamkoff/rector 1.0.3 → 1.0.4
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.
|
@@ -13,7 +13,6 @@ import { createEditor } from '@shelamkoff/rector'
|
|
|
13
13
|
import { Paragraph } from '@shelamkoff/rector/plugins/paragraph'
|
|
14
14
|
import { createColorSwatchPlugin } from '@shelamkoff/rector/inline-plugins/color'
|
|
15
15
|
import '@shelamkoff/rector/styles/editor.css'
|
|
16
|
-
import '@shelamkoff/color-picker/styles.css'
|
|
17
16
|
|
|
18
17
|
const editor = createEditor({
|
|
19
18
|
holder: document.querySelector('#editor'),
|
|
@@ -54,7 +53,7 @@ In read-only mode the widget remains visible but does not open the picker. `edit
|
|
|
54
53
|
|
|
55
54
|
## Styles and document output
|
|
56
55
|
|
|
57
|
-
|
|
56
|
+
The plugin acquires the color-picker stylesheet through Rector's reference-counted style registry while its editor is mounted, so applications must not import it separately. The widget root uses `.oe-ip.oe-ip--color`; its dot and label use `.oe-ip__dot` and `.oe-ip__label`. Scope host overrides under the editor or renderer container.
|
|
58
57
|
|
|
59
58
|
For document output, pass `createColorSwatchPlugin()` in `EditorRenderer`'s `inlinePlugins` array. The renderer uses its `createWidget()` and `getData()` subset; the picker is not mounted by the renderer.
|
|
60
59
|
|
|
@@ -13,7 +13,6 @@ import { createEditor } from '@shelamkoff/rector'
|
|
|
13
13
|
import { Paragraph } from '@shelamkoff/rector/plugins/paragraph'
|
|
14
14
|
import { createColorSwatchPlugin } from '@shelamkoff/rector/inline-plugins/color'
|
|
15
15
|
import '@shelamkoff/rector/styles/editor.css'
|
|
16
|
-
import '@shelamkoff/color-picker/styles.css'
|
|
17
16
|
|
|
18
17
|
const editor = createEditor({
|
|
19
18
|
holder: document.querySelector('#editor'),
|
|
@@ -54,7 +53,7 @@ const editor = createEditor({
|
|
|
54
53
|
|
|
55
54
|
## Стили и отображение документа
|
|
56
55
|
|
|
57
|
-
|
|
56
|
+
Плагин сам подключает таблицу стилей средства выбора цвета через реестр Rector с подсчётом ссылок на время жизни редактора, поэтому приложению не нужно импортировать её отдельно. Корневой элемент использует `.oe-ip.oe-ip--color`, а точка и подпись — `.oe-ip__dot` и `.oe-ip__label`. Ограничивайте переопределения контейнером редактора или рендерера.
|
|
58
57
|
|
|
59
58
|
Для отображения документа передайте `createColorSwatchPlugin()` в массив `inlinePlugins` конструктора `EditorRenderer`. Рендерер использует только `createWidget()` и `getData()`; окно выбора цвета в нём не подключается.
|
|
60
59
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { ColorPicker } from '@shelamkoff/color-picker'
|
|
1
|
+
import { ColorPicker, colorPickerStylesUrl } from '@shelamkoff/color-picker'
|
|
2
|
+
import { injectStyleUrls } from '../core/StyleInjector.js'
|
|
2
3
|
import { generateInlineId } from '../shared/inlineMarshal.js'
|
|
3
4
|
import { normalizeTextValue } from '../shared/textFormat.js'
|
|
4
5
|
|
|
@@ -12,6 +13,8 @@ import { normalizeTextValue } from '../shared/textFormat.js'
|
|
|
12
13
|
export function createColorSwatchPlugin() {
|
|
13
14
|
/** @type {import('../core/types').IScopedI18n | null} */
|
|
14
15
|
let i18n = null
|
|
16
|
+
/** @type {{ destroy(): void } | null} */
|
|
17
|
+
let styleHandle = null
|
|
15
18
|
|
|
16
19
|
return {
|
|
17
20
|
type: 'color',
|
|
@@ -19,6 +22,10 @@ export function createColorSwatchPlugin() {
|
|
|
19
22
|
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.938 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21"/><circle cx="7.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="12" cy="7.5" r=".5" fill="currentColor"/><circle cx="16.5" cy="10.5" r=".5" fill="currentColor"/></svg>',
|
|
20
23
|
/** @param {import('../core/types').IScopedI18n} _i18n */
|
|
21
24
|
setI18n(_i18n) { i18n = _i18n },
|
|
25
|
+
mount() {
|
|
26
|
+
if (styleHandle) throw new Error('Color swatch plugin is already mounted')
|
|
27
|
+
styleHandle = injectStyleUrls([colorPickerStylesUrl])
|
|
28
|
+
},
|
|
22
29
|
pasteConfig: {
|
|
23
30
|
patterns: [
|
|
24
31
|
/^#[0-9a-fA-F]{3}$/,
|
|
@@ -72,6 +79,11 @@ export function createColorSwatchPlugin() {
|
|
|
72
79
|
value: element.dataset.value || '#000000',
|
|
73
80
|
}
|
|
74
81
|
},
|
|
82
|
+
|
|
83
|
+
destroy() {
|
|
84
|
+
styleHandle?.destroy()
|
|
85
|
+
styleHandle = null
|
|
86
|
+
},
|
|
75
87
|
}
|
|
76
88
|
}
|
|
77
89
|
|