@openleaf-editor/ui 0.1.0-beta.2 → 0.1.0-beta.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.
- package/README.md +85 -0
- package/dist/block-type.d.ts +5 -0
- package/dist/block-type.d.ts.map +1 -0
- package/dist/block-type.js +133 -0
- package/dist/block-type.js.map +1 -0
- package/dist/content-css.d.ts +18 -0
- package/dist/content-css.d.ts.map +1 -1
- package/dist/content-css.js +231 -16
- package/dist/content-css.js.map +1 -1
- package/dist/css.d.ts +23 -0
- package/dist/css.d.ts.map +1 -0
- package/dist/css.js +846 -0
- package/dist/css.js.map +1 -0
- package/dist/dialog.d.ts +93 -0
- package/dist/dialog.d.ts.map +1 -1
- package/dist/dialog.js +414 -86
- package/dist/dialog.js.map +1 -1
- package/dist/floating.d.ts +4 -0
- package/dist/floating.d.ts.map +1 -1
- package/dist/floating.js +50 -2
- package/dist/floating.js.map +1 -1
- package/dist/help.d.ts +1 -1
- package/dist/help.d.ts.map +1 -1
- package/dist/help.js +29 -5
- package/dist/help.js.map +1 -1
- package/dist/i18n.d.ts +8 -0
- package/dist/i18n.d.ts.map +1 -1
- package/dist/i18n.js +32 -7
- package/dist/i18n.js.map +1 -1
- package/dist/icons.d.ts +7 -1
- package/dist/icons.d.ts.map +1 -1
- package/dist/icons.js +6 -2
- package/dist/icons.js.map +1 -1
- package/dist/index.d.ts +10 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -6
- package/dist/index.js.map +1 -1
- package/dist/items.d.ts +0 -1
- package/dist/items.d.ts.map +1 -1
- package/dist/items.js +211 -20
- package/dist/items.js.map +1 -1
- package/dist/live.d.ts +42 -0
- package/dist/live.d.ts.map +1 -0
- package/dist/live.js +83 -0
- package/dist/live.js.map +1 -0
- package/dist/menu.d.ts +31 -2
- package/dist/menu.d.ts.map +1 -1
- package/dist/menu.js +163 -23
- package/dist/menu.js.map +1 -1
- package/dist/openleaf.css +147 -12
- package/dist/overflow.d.ts +47 -4
- package/dist/overflow.d.ts.map +1 -1
- package/dist/overflow.js +338 -83
- package/dist/overflow.js.map +1 -1
- package/dist/registry.d.ts +72 -18
- package/dist/registry.d.ts.map +1 -1
- package/dist/registry.js +7 -6
- package/dist/registry.js.map +1 -1
- package/dist/skins.d.ts.map +1 -1
- package/dist/skins.js +48 -14
- package/dist/skins.js.map +1 -1
- package/dist/styles.d.ts +61 -1
- package/dist/styles.d.ts.map +1 -1
- package/dist/styles.js +77 -637
- package/dist/styles.js.map +1 -1
- package/dist/testing.d.ts +3 -0
- package/dist/testing.d.ts.map +1 -0
- package/dist/testing.js +3 -0
- package/dist/testing.js.map +1 -0
- package/dist/toolbar.d.ts +71 -12
- package/dist/toolbar.d.ts.map +1 -1
- package/dist/toolbar.js +410 -166
- package/dist/toolbar.js.map +1 -1
- package/dist/upload.d.ts +32 -7
- package/dist/upload.d.ts.map +1 -1
- package/dist/upload.js +64 -8
- package/dist/upload.js.map +1 -1
- package/package.json +17 -3
package/dist/registry.d.ts
CHANGED
|
@@ -19,27 +19,42 @@
|
|
|
19
19
|
import type { Command, EditorState } from 'prosemirror-state';
|
|
20
20
|
import type { EditorView } from 'prosemirror-view';
|
|
21
21
|
import type { IconName } from './icons.js';
|
|
22
|
+
import type { FormatSpec } from '@openleaf-editor/core';
|
|
22
23
|
/** What a custom `run` handler receives. */
|
|
23
24
|
export interface ToolbarContext {
|
|
24
25
|
view: EditorView;
|
|
26
|
+
/**
|
|
27
|
+
* The id this item was registered under.
|
|
28
|
+
*
|
|
29
|
+
* A custom control must put it in `data-ol-id`, which is what the toolbar
|
|
30
|
+
* reads back to restore focus across a re-render. Every custom control in the
|
|
31
|
+
* tree wrote its human LABEL there instead, so focus restoration silently
|
|
32
|
+
* failed for all of them -- passing the id here is what makes getting it right
|
|
33
|
+
* the default rather than something each plugin has to remember.
|
|
34
|
+
*/
|
|
35
|
+
id?: string;
|
|
25
36
|
/** The `<openleaf-editor>` element, for dispatching events or hosting dialogs. */
|
|
26
37
|
host: HTMLElement;
|
|
38
|
+
/** Extra host-defined block formats available to select controls. */
|
|
39
|
+
formats?: readonly FormatSpec[];
|
|
27
40
|
}
|
|
28
41
|
/**
|
|
29
42
|
* A control a `custom` item builds for itself.
|
|
30
43
|
*
|
|
31
44
|
* The contract is narrow on purpose. A custom item owns its own markup, so it
|
|
32
45
|
* can be a colour grid or a table-size picker, but it does not get to own the
|
|
33
|
-
* toolbar's keyboard model
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
46
|
+
* toolbar's keyboard model. Button-like custom controls participate in the
|
|
47
|
+
* roving tabindex through one `button.ol-btn`; select controls identify their
|
|
48
|
+
* native focus target with `focusable`. A control with two focusable elements
|
|
49
|
+
* in the bar would make the toolbar two tab stops where the author expects one.
|
|
50
|
+
* Anything else the control needs -- a popover, a grid of swatches -- belongs
|
|
51
|
+
* outside the toolbar element, in the top layer or on the host.
|
|
39
52
|
*/
|
|
40
53
|
export interface ToolbarControl {
|
|
41
54
|
/** The element placed in the toolbar. */
|
|
42
55
|
el: HTMLElement;
|
|
56
|
+
/** Focus target when the control is not a standard toolbar button. */
|
|
57
|
+
focusable?: HTMLElement;
|
|
43
58
|
/**
|
|
44
59
|
* Reflect the editor state. Called on every transaction, so it must be cheap
|
|
45
60
|
* and must not throw; a throw is caught and logged once, like a predicate.
|
|
@@ -48,6 +63,11 @@ export interface ToolbarControl {
|
|
|
48
63
|
/** Release listeners, and remove anything the control put in the document. */
|
|
49
64
|
destroy?: () => void;
|
|
50
65
|
}
|
|
66
|
+
/** One choice in a `type: 'select'` toolbar item. */
|
|
67
|
+
export interface ToolbarSelectOption {
|
|
68
|
+
value: string;
|
|
69
|
+
label: string;
|
|
70
|
+
}
|
|
51
71
|
export interface ToolbarItemSpec {
|
|
52
72
|
/** Stable id used in the `toolbar` layout attribute. */
|
|
53
73
|
id: string;
|
|
@@ -55,17 +75,22 @@ export interface ToolbarItemSpec {
|
|
|
55
75
|
* What kind of control this is.
|
|
56
76
|
*
|
|
57
77
|
* `button` is the common case. `custom` hands the item a chance to build its
|
|
78
|
+
* own DOM through `render`, which is how the colour picker and block-type
|
|
79
|
+
* select exist without id-specific branches in the toolbar.
|
|
80
|
+
*
|
|
81
|
+
* `select` and `custom` both build through `render`; the distinct name keeps
|
|
82
|
+
* the public declaration honest about the control users will receive.
|
|
58
83
|
* own DOM through `render`, which is how the colour picker exists at all: a
|
|
59
84
|
* swatch grid is not a button, and modelling it as one would have meant
|
|
60
|
-
* special-casing it in the toolbar by id
|
|
61
|
-
* still is.
|
|
85
|
+
* special-casing it in the toolbar by id.
|
|
62
86
|
*
|
|
63
|
-
* `select`
|
|
64
|
-
*
|
|
65
|
-
*
|
|
87
|
+
* `select` builds a native `<select>` from `options` / `getValue` /
|
|
88
|
+
* `applyValue`. The block-type control stays special-cased by id because it
|
|
89
|
+
* owns formats the host injects at mount time; everything else that is a
|
|
90
|
+
* preset list (font family, size, line height) uses this type.
|
|
66
91
|
*/
|
|
67
92
|
type?: 'button' | 'select' | 'custom';
|
|
68
|
-
/** Accessible name.
|
|
93
|
+
/** Accessible name. Use `labelFor` when the same control does insert versus edit. */
|
|
69
94
|
label: string;
|
|
70
95
|
icon?: IconName;
|
|
71
96
|
/**
|
|
@@ -78,10 +103,38 @@ export interface ToolbarItemSpec {
|
|
|
78
103
|
/** For items needing more than the editor state -- dialogs, mode switches. */
|
|
79
104
|
run?: (ctx: ToolbarContext) => void;
|
|
80
105
|
/**
|
|
81
|
-
* For `type: 'custom'`: build the control.
|
|
82
|
-
* otherwise.
|
|
106
|
+
* For `type: 'custom'` or `type: 'select'`: build the control.
|
|
83
107
|
*/
|
|
84
108
|
render?: (ctx: ToolbarContext) => ToolbarControl;
|
|
109
|
+
/**
|
|
110
|
+
* For `type: 'select'`: the choices shown. Required for that type. An empty
|
|
111
|
+
* `value` is the "Default" / clear option.
|
|
112
|
+
*/
|
|
113
|
+
options?: readonly ToolbarSelectOption[];
|
|
114
|
+
/**
|
|
115
|
+
* For `type: 'select'`: the value that matches the selection. Empty string
|
|
116
|
+
* means no explicit formatting (the Default option).
|
|
117
|
+
*/
|
|
118
|
+
getValue?: (state: EditorState) => string;
|
|
119
|
+
/**
|
|
120
|
+
* For `type: 'select'`: turn a chosen value into a command. Empty string
|
|
121
|
+
* clears.
|
|
122
|
+
*/
|
|
123
|
+
applyValue?: (value: string) => Command;
|
|
124
|
+
/**
|
|
125
|
+
* Optional CSS modifier for a select (e.g. `wide` for long font names).
|
|
126
|
+
* Becomes `ol-select--{mod}` on the element.
|
|
127
|
+
*/
|
|
128
|
+
selectMod?: string;
|
|
129
|
+
/**
|
|
130
|
+
* Accessible name that depends on the selection.
|
|
131
|
+
*
|
|
132
|
+
* `label` stays the default. Use this when the same control does two
|
|
133
|
+
* different things -- insert versus edit -- so the name can say which.
|
|
134
|
+
* Do not use it to bake "pressed" into a toggle; the platform already
|
|
135
|
+
* announces that.
|
|
136
|
+
*/
|
|
137
|
+
labelFor?: (state: EditorState) => string;
|
|
85
138
|
isActive?: (state: EditorState) => boolean;
|
|
86
139
|
/** Defaults to asking `command` whether it would apply. */
|
|
87
140
|
isEnabled?: (state: EditorState) => boolean;
|
|
@@ -104,10 +157,11 @@ export declare function clearToolbarItems(): void;
|
|
|
104
157
|
* Order reasoning: history sits leftmost because it is the control an author
|
|
105
158
|
* reaches for under stress and muscle memory puts it at the start of the bar in
|
|
106
159
|
* every office application. Block type comes next because choosing what a
|
|
107
|
-
* paragraph *is* precedes decorating it.
|
|
108
|
-
*
|
|
109
|
-
*
|
|
110
|
-
*
|
|
160
|
+
* paragraph *is* precedes decorating it. Font family, size and line height sit
|
|
161
|
+
* beside it as the next layer of look. Then character marks, alignment, indent,
|
|
162
|
+
* lists, insertions, and finally source view -- the one control that changes
|
|
163
|
+
* the editor's mode rather than the document, kept away from the rest so it is
|
|
164
|
+
* not hit by accident.
|
|
111
165
|
*/
|
|
112
166
|
export declare const DEFAULT_LAYOUT: string;
|
|
113
167
|
/**
|
package/dist/registry.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"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"}
|
package/dist/registry.js
CHANGED
|
@@ -67,14 +67,15 @@ export function clearToolbarItems() {
|
|
|
67
67
|
* Order reasoning: history sits leftmost because it is the control an author
|
|
68
68
|
* reaches for under stress and muscle memory puts it at the start of the bar in
|
|
69
69
|
* every office application. Block type comes next because choosing what a
|
|
70
|
-
* paragraph *is* precedes decorating it.
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
*
|
|
70
|
+
* paragraph *is* precedes decorating it. Font family, size and line height sit
|
|
71
|
+
* beside it as the next layer of look. Then character marks, alignment, indent,
|
|
72
|
+
* lists, insertions, and finally source view -- the one control that changes
|
|
73
|
+
* the editor's mode rather than the document, kept away from the rest so it is
|
|
74
|
+
* not hit by accident.
|
|
74
75
|
*/
|
|
75
|
-
export const DEFAULT_LAYOUT = 'undo redo | blockType | bold italic underline strikethrough code | ' +
|
|
76
|
+
export const DEFAULT_LAYOUT = 'undo redo | blockType | fontFamily fontSize lineHeight | bold italic underline strikethrough code | ' +
|
|
76
77
|
'alignLeft alignCenter alignRight alignJustify | ' +
|
|
77
|
-
'bulletList orderedList blockquote codeBlock | link unlink image horizontalRule | source';
|
|
78
|
+
'indent outdent | bulletList orderedList blockquote codeBlock | link unlink image horizontalRule | source';
|
|
78
79
|
/**
|
|
79
80
|
* The default layout with the colour controls in it.
|
|
80
81
|
*
|
package/dist/registry.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;
|
|
1
|
+
{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAoIH,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA2B,CAAA;AAEnD;;;;;;;GAOG;AACH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAA;AAEvC,MAAM,UAAU,gBAAgB,CAAC,QAAoB;IACnD,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IACvB,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;AACzC,CAAC;AAED,SAAS,MAAM;IACb,4EAA4E;IAC5E,2EAA2E;IAC3E,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;QACjC,IAAI,CAAC;YACH,QAAQ,EAAE,CAAA;QACZ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,oDAAoD,EAAE,KAAK,CAAC,CAAA;QAC5E,CAAC;IACH,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAqB;IACvD,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;IAC3B,MAAM,EAAE,CAAA;AACV,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAU;IACvC,OAAO,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA;AAC/B,CAAC;AAED,gDAAgD;AAChD,MAAM,UAAU,iBAAiB;IAC/B,QAAQ,CAAC,KAAK,EAAE,CAAA;IAChB,MAAM,EAAE,CAAA;AACV,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,cAAc,GACzB,sGAAsG;IACtG,kDAAkD;IAClD,0GAA0G,CAAA;AAE5G;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,CACtD,WAAW,EACX,wCAAwC,CACzC,CAAA"}
|
package/dist/skins.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skins.d.ts","sourceRoot":"","sources":["../src/skins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,MAAM,WAAW,IAAI;IACnB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC1B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,IAAI,
|
|
1
|
+
{"version":3,"file":"skins.d.ts","sourceRoot":"","sources":["../src/skins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,MAAM,WAAW,IAAI;IACnB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC1B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,IAAI,EAiFzC,CAAA;AA6CD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAI7D;AAwBD,wBAAgB,cAAc,IAAI,SAAS,IAAI,EAAE,CAEhD;AAED,2DAA2D;AAC3D,wBAAgB,WAAW,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAEhD;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAuBtE;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAEpD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,CAQ/E"}
|
package/dist/skins.js
CHANGED
|
@@ -50,8 +50,10 @@ export const BUILT_IN_SKINS = [
|
|
|
50
50
|
--openleaf-color-surface-hover: #21262d;
|
|
51
51
|
--openleaf-color-surface-active: #1f3a5f;
|
|
52
52
|
--openleaf-color-border: #3d444d;
|
|
53
|
+
--openleaf-color-border-strong: #8b949e;
|
|
53
54
|
--openleaf-color-accent: #79c0ff;
|
|
54
55
|
--openleaf-color-focus: #79c0ff;
|
|
56
|
+
--openleaf-color-danger: #ff8182;
|
|
55
57
|
`,
|
|
56
58
|
},
|
|
57
59
|
{
|
|
@@ -65,6 +67,7 @@ export const BUILT_IN_SKINS = [
|
|
|
65
67
|
--openleaf-color-surface-hover: #f0e9dd;
|
|
66
68
|
--openleaf-color-surface-active: #e6dcc8;
|
|
67
69
|
--openleaf-color-border: #d8cdb9;
|
|
70
|
+
--openleaf-color-border-strong: #7d7364;
|
|
68
71
|
--openleaf-color-accent: #8a5a20;
|
|
69
72
|
--openleaf-color-focus: #8a5a20;
|
|
70
73
|
--openleaf-radius: 2px;
|
|
@@ -87,8 +90,13 @@ export const BUILT_IN_SKINS = [
|
|
|
87
90
|
--openleaf-color-surface-hover: #e8e8e8;
|
|
88
91
|
--openleaf-color-surface-active: #d0d0d0;
|
|
89
92
|
--openleaf-color-border: #000000;
|
|
93
|
+
/* Set explicitly, and not because the default would fail: it would leave
|
|
94
|
+
this skin's control boundaries at the shared 4.55:1 fallback while its
|
|
95
|
+
decorative ones sat at 21:1, which is this skin backwards. */
|
|
96
|
+
--openleaf-color-border-strong: #000000;
|
|
90
97
|
--openleaf-color-accent: #0000c0;
|
|
91
98
|
--openleaf-color-focus: #0000c0;
|
|
99
|
+
--openleaf-color-danger: #a40e26;
|
|
92
100
|
--openleaf-focus-width: 3px;
|
|
93
101
|
--openleaf-focus-offset: 2px;
|
|
94
102
|
`,
|
|
@@ -112,20 +120,45 @@ export const BUILT_IN_SKINS = [
|
|
|
112
120
|
`,
|
|
113
121
|
},
|
|
114
122
|
];
|
|
115
|
-
|
|
116
|
-
|
|
123
|
+
/*
|
|
124
|
+
* Built lazily, and that is a bundling decision rather than a performance one.
|
|
125
|
+
*
|
|
126
|
+
* `new Map(BUILT_IN_SKINS.map(...))` at module scope is a constructor call a
|
|
127
|
+
* tree-shaker cannot prove is pure, so the statement is retained -- and with it
|
|
128
|
+
* this whole module, and `styles.js` which it imports from. The cost landed on
|
|
129
|
+
* every consumer of the barrel: `import { t }` from `@openleaf-editor/ui` -- a
|
|
130
|
+
* 183-byte function with no imports of its own -- dragged the skin table and the
|
|
131
|
+
* stylesheet machinery in behind it.
|
|
132
|
+
*
|
|
133
|
+
* Deferring the construction to first use makes every top-level binding in this
|
|
134
|
+
* module a plain literal, so a bundler can drop the module entirely when nothing
|
|
135
|
+
* reaches for a skin. Nothing observable changes: `registry()` is called by every
|
|
136
|
+
* entry point below before it touches the table.
|
|
137
|
+
*/
|
|
138
|
+
let skins = null;
|
|
139
|
+
function registry() {
|
|
140
|
+
if (!skins)
|
|
141
|
+
skins = new Map(BUILT_IN_SKINS.map((skin) => [skin.name, skin]));
|
|
142
|
+
return skins;
|
|
143
|
+
}
|
|
117
144
|
function css() {
|
|
118
|
-
return [...
|
|
145
|
+
return [...registry().values()]
|
|
119
146
|
.map((skin) => `.ol-editor[data-ol-skin="${skin.name}"] {${skin.tokens}}`)
|
|
120
147
|
.join('\n');
|
|
121
148
|
}
|
|
122
|
-
/**
|
|
149
|
+
/**
|
|
150
|
+
* Install the skin stylesheet. Re-run when a skin is added.
|
|
151
|
+
*
|
|
152
|
+
* No module-global "already installed" flag here. There used to be one, holding
|
|
153
|
+
* the last sheet text, and it made every call for a SECOND document a no-op: an
|
|
154
|
+
* editor in an iframe or a print view got the built-in tokens and none of the
|
|
155
|
+
* skin palette, because the flag short-circuited before `registerStyles` was
|
|
156
|
+
* reached. `registerStyles` already dedupes per *document* by the CSS text
|
|
157
|
+
* (a WeakMap<Document, Set<string>> in styles.ts), which is the same saving
|
|
158
|
+
* without the bug -- and is exactly what dialog.ts moved to for this reason.
|
|
159
|
+
*/
|
|
123
160
|
function sync(doc) {
|
|
124
|
-
|
|
125
|
-
if (next === installedSheet)
|
|
126
|
-
return;
|
|
127
|
-
installedSheet = next;
|
|
128
|
-
registerStyles(next, doc);
|
|
161
|
+
registerStyles(css(), doc);
|
|
129
162
|
}
|
|
130
163
|
/**
|
|
131
164
|
* Add a skin, or replace one by name.
|
|
@@ -154,7 +187,7 @@ function sync(doc) {
|
|
|
154
187
|
*/
|
|
155
188
|
export function registerSkin(skin, doc) {
|
|
156
189
|
warnIfSchemeMissing(skin);
|
|
157
|
-
|
|
190
|
+
registry().set(skin.name, skin);
|
|
158
191
|
sync(doc);
|
|
159
192
|
}
|
|
160
193
|
/*
|
|
@@ -164,10 +197,11 @@ export function registerSkin(skin, doc) {
|
|
|
164
197
|
* worth a console message, because nothing about the result looks like a
|
|
165
198
|
* mistake locally.
|
|
166
199
|
*/
|
|
167
|
-
|
|
200
|
+
let schemeWarned = null;
|
|
168
201
|
function warnIfSchemeMissing(skin) {
|
|
169
202
|
if (skin.scheme || !skin.tokens.includes('--openleaf-color-surface:'))
|
|
170
203
|
return;
|
|
204
|
+
schemeWarned ??= new Set();
|
|
171
205
|
if (schemeWarned.has(skin.name))
|
|
172
206
|
return;
|
|
173
207
|
schemeWarned.add(skin.name);
|
|
@@ -177,7 +211,7 @@ function warnIfSchemeMissing(skin) {
|
|
|
177
211
|
"Add scheme: 'light' or scheme: 'dark'.");
|
|
178
212
|
}
|
|
179
213
|
export function availableSkins() {
|
|
180
|
-
return [...
|
|
214
|
+
return [...registry().values()];
|
|
181
215
|
}
|
|
182
216
|
/** Ensure the built-in skins are available. Idempotent. */
|
|
183
217
|
export function ensureSkins(doc) {
|
|
@@ -197,10 +231,10 @@ export function applySkin(host, name) {
|
|
|
197
231
|
host.removeAttribute('data-ol-scheme');
|
|
198
232
|
return;
|
|
199
233
|
}
|
|
200
|
-
const skin =
|
|
234
|
+
const skin = registry().get(name);
|
|
201
235
|
if (!skin) {
|
|
202
236
|
console.warn(`@openleaf-editor/ui: no skin named "${name}". Available: ` +
|
|
203
|
-
`${[...
|
|
237
|
+
`${[...registry().keys()].join(', ')}. The editor keeps its current appearance.`);
|
|
204
238
|
return;
|
|
205
239
|
}
|
|
206
240
|
host.setAttribute('data-ol-skin', name);
|
package/dist/skins.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skins.js","sourceRoot":"","sources":["../src/skins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AA4B5C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC7C;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE
|
|
1
|
+
{"version":3,"file":"skins.js","sourceRoot":"","sources":["../src/skins.ts"],"names":[],"mappings":"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"}
|
package/dist/styles.d.ts
CHANGED
|
@@ -26,6 +26,9 @@
|
|
|
26
26
|
* 1. A constructable `CSSStyleSheet` added to `document.adoptedStyleSheets`.
|
|
27
27
|
* CSP gates resources *parsed as style*; a CSSOM object attached this way
|
|
28
28
|
* never passes through that gate, by design rather than by loophole.
|
|
29
|
+
* Constructed through the TARGET document's window, never this module's:
|
|
30
|
+
* a constructed sheet belongs to the document it was built for, and
|
|
31
|
+
* adopting it elsewhere throws NotAllowedError.
|
|
29
32
|
* 2. The integrator links `@openleaf-editor/ui/openleaf.css` themselves and calls
|
|
30
33
|
* `markStylesExternal()`.
|
|
31
34
|
*
|
|
@@ -34,8 +37,65 @@
|
|
|
34
37
|
* would need it, and it fails *silently* -- an unstyled toolbar with no signal
|
|
35
38
|
* an integrator can act on. A console warning naming the stylesheet is more
|
|
36
39
|
* useful than a mechanism that quietly does nothing.
|
|
40
|
+
*
|
|
41
|
+
* ## Why the accessibility reasoning lives out here
|
|
42
|
+
*
|
|
43
|
+
* The bundles are minified, which strips these comments but NOT the contents of
|
|
44
|
+
* the template literal below -- a CSS comment is string data and ships to every
|
|
45
|
+
* user. So the long-form arguments sit here and the rules carry a short marker
|
|
46
|
+
* pointing back. Ratios below are computed with the WCAG 2.x sRGB formula
|
|
47
|
+
* against all four built-in palettes: default light, midnight, paper, contrast.
|
|
48
|
+
*
|
|
49
|
+
* ### Two border tokens
|
|
50
|
+
*
|
|
51
|
+
* `--ol-border` is 1.43:1 against the default surface (1.92 midnight, 1.47
|
|
52
|
+
* paper). That is right for a table rule or a group divider and wrong for the
|
|
53
|
+
* only thing delimiting a `<select>`, where WCAG 1.4.11 wants 3:1 for the parts
|
|
54
|
+
* of a control that identify it. Rather than darken every hairline in the
|
|
55
|
+
* editor, the two jobs are split: `--ol-border-strong` takes the control
|
|
56
|
+
* boundaries -- toolbar, menubar, content frame, source view, select, menu --
|
|
57
|
+
* and the decorative one stays quiet. The fallback clears 3:1 on a white
|
|
58
|
+
* surface (4.55:1) and a dark one (4.16:1) alike, so a third-party skin that
|
|
59
|
+
* sets only `--openleaf-color-border` still gets a legible control boundary.
|
|
60
|
+
*
|
|
61
|
+
* ### Menu focus
|
|
62
|
+
*
|
|
63
|
+
* `.ol-menu-item` had `outline: none` and a background swap standing in for the
|
|
64
|
+
* ring. That swap is 1.13:1 on the default palette, 1.24 midnight, 1.13 paper,
|
|
65
|
+
* and 1.23 in the skin named "High contrast"; 1.4.11 requires 3:1. A menu item
|
|
66
|
+
* is reachable only by ArrowDown, so that swap was the author's sole position
|
|
67
|
+
* marker. The ring is back and the swap stays as hover affordance. It is inset
|
|
68
|
+
* two pixels rather than outset so it is drawn inside the item rather than over
|
|
69
|
+
* the menu's padding and its neighbour, and it lands at 4.59:1 against the
|
|
70
|
+
* item's own hovered background (7.82 midnight, 4.88 paper, 9.73 contrast).
|
|
71
|
+
*
|
|
72
|
+
* ### Disabled is not invisible
|
|
73
|
+
*
|
|
74
|
+
* `opacity: 0.4` put a 16px glyph at 2.41:1 (2.34 paper, 2.85 contrast), which
|
|
75
|
+
* is not a dimmed icon but an absent one -- and `undo`, `redo` and `link` are
|
|
76
|
+
* disabled at rest. 0.55 stays plainly quieter than an enabled control while
|
|
77
|
+
* clearing 3:1 as non-text content. A disabled control is exempt from 1.4.3
|
|
78
|
+
* either way; being exempt from a rule is not a reason to be unreadable.
|
|
79
|
+
*
|
|
80
|
+
* ### Cell selection
|
|
81
|
+
*
|
|
82
|
+
* The `.selectedCell` tint alone measured 1.06-1.18:1 depending on the palette,
|
|
83
|
+
* and a selection you cannot see is one you will destroy by typing. The ring
|
|
84
|
+
* carries the information now and the tint is the nicety. The ring goes on the
|
|
85
|
+
* cell rather than on the `::after` overlay because the overlay's own `opacity`
|
|
86
|
+
* would fade it to the same invisibility -- a 40% accent lands near 2:1. Per
|
|
87
|
+
* CSS 2.1 Appendix E an element's outline paints in step 10, after all its
|
|
88
|
+
* descendants, so the tint does not cover it.
|
|
89
|
+
*
|
|
90
|
+
* ### Forced colours
|
|
91
|
+
*
|
|
92
|
+
* The block at the end of the sheet previously stopped at `.ol-btn`. Everything
|
|
93
|
+
* added to it depends on a palette this mode discards outright, so each of them
|
|
94
|
+
* had no indicator at all: which menu is open, which menu item has focus, which
|
|
95
|
+
* cells are selected, and every one of the visual aids -- whose entire output
|
|
96
|
+
* is a colour.
|
|
37
97
|
*/
|
|
38
|
-
export declare const CSS = "\n.ol-editor {\n /* Two families, named before either is public API. A singular\n `--openleaf-font` implies \"the\" font, and source view already has a\n monospace surface -- bolting a mono token on beside a singular name later\n is the awkward outcome worth avoiding now. `--openleaf-font` is still\n honoured as a fallback. */\n --ol-font: var(--openleaf-font-ui, var(--openleaf-font, system-ui, -apple-system, \"Segoe UI\", sans-serif));\n --ol-font-mono: var(--openleaf-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n --ol-font-size: var(--openleaf-font-size, 14px);\n --ol-radius: var(--openleaf-radius, 4px);\n --ol-text: var(--openleaf-color-text, #1f2328);\n --ol-text-muted: var(--openleaf-color-text-muted, #59636e);\n --ol-surface: var(--openleaf-color-surface, #ffffff);\n --ol-surface-hover: var(--openleaf-color-surface-hover, #f0f1f3);\n --ol-surface-active: var(--openleaf-color-surface-active, #dbe9ff);\n --ol-border: var(--openleaf-color-border, #d1d9e0);\n --ol-accent: var(--openleaf-color-accent, #0550ae);\n --ol-focus: var(--openleaf-color-focus, #0969da);\n --ol-button-size: var(--openleaf-button-size, 32px);\n --ol-icon-size: var(--openleaf-icon-size, 16px);\n --ol-gap: var(--openleaf-gap, 2px);\n /* A 2009 WordPress admin bar sits at z-index 99999 and Drupal's toolbar plays\n similar games. Without a sanctioned escape hatch integrators fix a toolbar\n rendered behind a sticky host header with !important -- the exact thing the\n token API exists to prevent. */\n --ol-z: var(--openleaf-z-index, 1);\n /* Thickness and offset, not just colour: \"you can change the colour but not\n the thickness\" is a poor answer to a Section 508 team citing WCAG 2.2\n Focus Appearance. */\n --ol-focus-width: var(--openleaf-focus-width, 2px);\n --ol-focus-offset: var(--openleaf-focus-offset, 1px);\n\n display: block;\n position: relative;\n color: var(--ol-text);\n}\n\n/* Three ways into the dark palette, and one way out of it.\n `data-ol-scheme` is set from the applied skin's declared scheme, and a skin\n that declares one outranks both the attribute and the system -- it has to,\n because its tokens have already replaced the palette outright. Without the\n `:not()` guards a light skin on a dark machine would take these fallbacks for\n every token it did not itself set, which is a light surface carrying dark-mode\n muted text. */\n@media (prefers-color-scheme: dark) {\n .ol-editor:not([data-ol-theme=\"light\"]):not([data-ol-scheme]) {\n --ol-text: var(--openleaf-color-text, #e6edf3);\n --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n --ol-surface: var(--openleaf-color-surface, #0d1117);\n --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n --ol-border: var(--openleaf-color-border, #3d444d);\n --ol-accent: var(--openleaf-color-accent, #79c0ff);\n --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n}\n\n.ol-editor[data-ol-theme=\"dark\"]:not([data-ol-scheme]) {\n --ol-text: var(--openleaf-color-text, #e6edf3);\n --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n --ol-surface: var(--openleaf-color-surface, #0d1117);\n --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n --ol-border: var(--openleaf-color-border, #3d444d);\n --ol-accent: var(--openleaf-color-accent, #79c0ff);\n --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n\n.ol-editor[data-ol-scheme=\"dark\"] {\n --ol-text: var(--openleaf-color-text, #e6edf3);\n --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n --ol-surface: var(--openleaf-color-surface, #0d1117);\n --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n --ol-border: var(--openleaf-color-border, #3d444d);\n --ol-accent: var(--openleaf-color-accent, #79c0ff);\n --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n\n/* Native widget chrome -- the popup a `select` opens, scrollbars, the caret,\n form control backgrounds -- is painted by the browser from `color-scheme`,\n not from any property we can hand an integrator. Left alone it follows the\n page, which is right while the editor's own palette also follows the page and\n wrong the moment either attribute pins the editor to one world. So it is set\n exactly when the editor stops following along, and inherited from the host\n otherwise. */\n.ol-editor[data-ol-theme=\"light\"] { color-scheme: light; }\n.ol-editor[data-ol-theme=\"dark\"] { color-scheme: dark; }\n.ol-editor[data-ol-scheme=\"light\"] { color-scheme: light; }\n.ol-editor[data-ol-scheme=\"dark\"] { color-scheme: dark; }\n\n/* Wrapping, not scrolling and not an overflow menu. Both of those hide\n controls -- one off-screen, one behind a click -- and a formatting control\n the author cannot see is a control they do not have. */\n.ol-editor .ol-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ol-gap);\n box-sizing: border-box;\n margin: 0;\n padding: 4px;\n border: 1px solid var(--ol-border);\n border-bottom: 0;\n border-radius: var(--ol-radius) var(--ol-radius) 0 0;\n background: var(--ol-surface);\n font: inherit;\n position: relative;\n z-index: var(--ol-z);\n}\n\n.ol-editor .ol-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ol-gap);\n}\n\n/* The divider is a BORDER on the group, not a standalone flex item.\n As its own element it could wrap onto the trailing edge of a row with nothing\n after it -- a stranded line floating at the end of a row. Wrapping begins\n around 690-740px, well inside ordinary desktop widths (a CMS sidebar, a\n half-width split pane), so this was not a 360px-only edge case.\n border-inline-start rather than border-left, so it flips under RTL. */\n.ol-editor .ol-group + .ol-group {\n border-inline-start: 1px solid var(--ol-border);\n padding-inline-start: 5px;\n margin-inline-start: 1px;\n}\n\n/* Every property a host reset or `button {}` rule is likely to touch is set\n here explicitly. Specificity is (0,2,0) via the descendant selector, which\n beats a bare element or single-class host rule without resorting to\n !important. */\n.ol-editor .ol-btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--ol-button-size);\n height: var(--ol-button-size);\n min-width: var(--ol-button-size);\n min-height: var(--ol-button-size);\n max-width: none;\n padding: 0;\n margin: 0;\n border: 1px solid transparent;\n border-radius: var(--ol-radius);\n background: transparent;\n color: var(--ol-text);\n font: inherit;\n font-family: var(--ol-font);\n font-size: var(--ol-font-size);\n font-weight: 400;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n box-shadow: none;\n opacity: 1;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n outline-offset: var(--ol-focus-offset);\n -webkit-tap-highlight-color: transparent;\n transition: background-color 120ms ease, border-color 120ms ease;\n}\n\n.ol-editor .ol-btn:hover {\n background: var(--ol-surface-hover);\n}\n\n/* :focus-visible only, so a mouse click does not leave a ring behind, but the\n ring is never removed for keyboard users. */\n.ol-editor .ol-btn:focus-visible {\n outline: var(--ol-focus-width) solid var(--ol-focus);\n outline-offset: var(--ol-focus-offset);\n}\n\n/* Pressed state is distinguished from hover by THREE signals, not just colour:\n a filled background, a visible border, and an inset shadow that reads as\n physically depressed. Colour alone would fail for a colour-blind author and\n would be invisible in forced-colours mode. */\n.ol-editor .ol-btn[aria-pressed=\"true\"] {\n background: var(--ol-surface-active);\n border-color: var(--ol-accent);\n color: var(--ol-accent);\n box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%);\n}\n\n.ol-editor .ol-btn[aria-pressed=\"true\"]:hover {\n background: var(--ol-surface-active);\n border-color: var(--ol-accent);\n}\n\n/* aria-disabled rather than the disabled attribute: a disabled button is\n removed from the roving tabindex and cannot be reached or announced, so an\n author using a screen reader cannot discover that the control exists. */\n.ol-editor .ol-btn[aria-disabled=\"true\"] {\n opacity: 0.4;\n cursor: default;\n}\n\n.ol-editor .ol-btn[aria-disabled=\"true\"]:hover {\n background: transparent;\n}\n\n.ol-editor .ol-icon {\n width: var(--ol-icon-size);\n height: var(--ol-icon-size);\n display: block;\n pointer-events: none;\n flex: 0 0 auto;\n}\n\n/* Block-type select. Sized and coloured to sit level with the icon buttons so\n it does not read as bolted on, but it stays a native <select> -- a custom\n listbox is a large amount of ARIA that would then owe real screen reader\n testing to be worth anything. */\n.ol-editor .ol-select {\n box-sizing: border-box;\n height: var(--ol-button-size);\n max-width: 11em;\n padding: 0 22px 0 6px;\n margin: 0;\n border: 1px solid var(--ol-border);\n border-radius: var(--ol-radius);\n background-color: transparent;\n background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),\n linear-gradient(135deg, currentColor 50%, transparent 50%);\n background-position: right 10px center, right 6px center;\n background-size: 4px 4px, 4px 4px;\n background-repeat: no-repeat;\n color: var(--ol-text);\n font-family: var(--ol-font);\n font-size: var(--ol-font-size);\n font-weight: 400;\n line-height: 1;\n text-transform: none;\n letter-spacing: normal;\n box-shadow: none;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n}\n\n.ol-editor .ol-select:hover {\n background-color: var(--ol-surface-hover);\n}\n\n.ol-editor .ol-select:focus-visible {\n outline: var(--ol-focus-width) solid var(--ol-focus);\n outline-offset: var(--ol-focus-offset);\n}\n\n/* The option list is painted by the OS, which does not inherit our tokens, so\n give it explicit colours or dark mode shows black text on black. */\n.ol-editor .ol-select option {\n background: var(--ol-surface);\n color: var(--ol-text);\n}\n\n.ol-editor .ol-content {\n box-sizing: border-box;\n border: 1px solid var(--ol-border);\n border-radius: 0 0 var(--ol-radius) var(--ol-radius);\n background: var(--ol-surface);\n}\n\n/* Deliberately minimal: the content area inherits the host's typography, which\n is the entire reason this project does not use Shadow DOM. Only padding and\n the focus ring are ours. */\n.ol-editor .ol-content .ProseMirror {\n padding: 12px;\n min-height: 8rem;\n outline: none;\n}\n\n.ol-editor .ol-content:focus-within {\n outline: 2px solid var(--ol-focus);\n outline-offset: -1px;\n}\n\n/* Tables.\n These styles live in core, not in the opt-in table plugin, because table\n NODES live in core: every deployment reads and renders tables even where\n editing them is switched off. Unstyled tables would render as runs of\n undelimited text. */\n.ol-editor .ol-content .ProseMirror table {\n border-collapse: collapse;\n table-layout: fixed;\n width: 100%;\n margin: 0 0 1em;\n overflow: hidden;\n}\n\n.ol-editor .ol-content .ProseMirror td,\n.ol-editor .ol-content .ProseMirror th {\n border: 1px solid var(--ol-border);\n padding: 6px 8px;\n vertical-align: top;\n /* A zero-width cell cannot be clicked into, so it cannot be repaired. */\n min-width: 2em;\n position: relative;\n}\n\n/* Presentational valign is otherwise beaten by the rule above, which would\n make the cell-properties dialog a no-op on screen. */\n.ol-editor .ol-content .ProseMirror td[valign=\"middle\"],\n.ol-editor .ol-content .ProseMirror th[valign=\"middle\"] { vertical-align: middle; }\n.ol-editor .ol-content .ProseMirror td[valign=\"bottom\"],\n.ol-editor .ol-content .ProseMirror th[valign=\"bottom\"] { vertical-align: bottom; }\n.ol-editor .ol-content .ProseMirror td[valign=\"baseline\"],\n.ol-editor .ol-content .ProseMirror th[valign=\"baseline\"] { vertical-align: baseline; }\n\n.ol-editor .ol-content .ProseMirror th {\n background: var(--ol-surface-hover);\n font-weight: 600;\n text-align: start;\n}\n\n/* prosemirror-tables marks cells in a rectangular selection with this class.\n An ::after overlay rather than a background so it composes with a cell that\n already has one, and so a header cell still reads as a header. */\n.ol-editor .ol-content .ProseMirror .selectedCell::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--ol-surface-active);\n opacity: 0.4;\n pointer-events: none;\n}\n\n/* The column resize handle, drawn by prosemirror-tables' columnResizing. */\n.ol-editor .ol-content .ProseMirror .column-resize-handle {\n position: absolute;\n right: -2px;\n top: 0;\n bottom: 0;\n width: 4px;\n background: var(--ol-accent);\n pointer-events: none;\n z-index: 20;\n}\n\n.ol-editor .ol-content .ProseMirror.resize-cursor {\n cursor: col-resize;\n}\n\n.ol-editor .ol-content .ProseMirror img.ol-float-left {\n float: left;\n margin: 0 1em 0.5em 0;\n}\n.ol-editor .ol-content .ProseMirror img.ol-float-right {\n float: right;\n margin: 0 0 0.5em 1em;\n}\n.ol-editor .ol-content .ProseMirror img.ol-align-center {\n display: block;\n margin: 0 auto 0.5em;\n}\n.ol-editor .ol-content .ProseMirror figure {\n margin: 0 0 1em;\n}\n.ol-editor .ol-content .ProseMirror figcaption {\n font-size: .9em;\n opacity: .8;\n margin-top: .35em;\n}\n.ol-editor .ol-content .ProseMirror details {\n border: 1px solid var(--ol-border);\n border-radius: var(--ol-radius);\n padding: .5em .75em;\n margin: 0 0 1em;\n}\n.ol-editor .ol-content .ProseMirror summary {\n cursor: pointer;\n font-weight: 600;\n}\n.ol-editor .ol-content .ProseMirror hr.ol-pagebreak {\n border: 0;\n border-top: 2px dashed var(--ol-border);\n margin: 1.5em 0;\n}\n.ol-editor .ol-content .ProseMirror iframe,\n.ol-editor .ol-content .ProseMirror video,\n.ol-editor .ol-content .ProseMirror audio {\n max-width: 100%;\n}\n\n/* Preserved-but-unrecognised markup, surfaced rather than hidden. */\n.ol-editor .ol-content .ProseMirror-selectednode {\n outline: 2px solid var(--ol-focus);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n.ol-editor .ol-source {\n box-sizing: border-box;\n display: block;\n width: 100%;\n min-height: 12rem;\n padding: 12px;\n border: 1px solid var(--ol-border);\n border-radius: 0 0 var(--ol-radius) var(--ol-radius);\n background: var(--ol-surface);\n color: var(--ol-text);\n font-family: var(--ol-font-mono);\n font-size: 13px;\n line-height: 1.5;\n resize: vertical;\n white-space: pre-wrap;\n}\n\n/* Directional icons under RTL.\n Group order reverses for free with flexbox, but a curved undo arrow does not:\n in an RTL document \"back\" points the other way. Only genuinely directional\n icons are flipped -- bold and italic must not be mirrored. */\n.ol-editor[dir=\"rtl\"] .ol-icon--directional,\n[dir=\"rtl\"] .ol-editor .ol-icon--directional {\n transform: scaleX(-1);\n}\n\n/* The announcement region. Visually hidden but not display:none, which would\n remove it from the accessibility tree and silence it. */\n.ol-editor .ol-live {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n/* Menubar, menus, floating chrome, visual aids, fullscreen, inline. */\n.ol-editor .ol-menubar {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ol-gap);\n box-sizing: border-box;\n margin: 0;\n padding: 2px 4px;\n border: 1px solid var(--ol-border);\n border-bottom: 0;\n border-radius: var(--ol-radius) var(--ol-radius) 0 0;\n background: var(--ol-surface);\n position: relative;\n z-index: var(--ol-z);\n}\n.ol-editor .ol-menubar + .ol-toolbar {\n border-radius: 0;\n}\n.ol-editor .ol-menu-trigger {\n box-sizing: border-box;\n margin: 0;\n padding: 4px 8px;\n border: 1px solid transparent;\n border-radius: var(--ol-radius);\n background: transparent;\n color: var(--ol-text);\n font: inherit;\n font-family: var(--ol-font);\n font-size: var(--ol-font-size);\n cursor: pointer;\n appearance: none;\n}\n.ol-editor .ol-menu-trigger:hover,\n.ol-editor .ol-menu-trigger[aria-expanded=\"true\"] {\n background: var(--ol-surface-hover);\n}\n.ol-editor .ol-menu-trigger:focus-visible {\n outline: var(--ol-focus-width) solid var(--ol-focus);\n outline-offset: var(--ol-focus-offset);\n}\n.ol-editor .ol-menu {\n position: absolute;\n z-index: calc(var(--ol-z) + 20);\n min-width: 12rem;\n margin: 0;\n padding: 4px;\n border: 1px solid var(--ol-border);\n border-radius: var(--ol-radius);\n background: var(--ol-surface);\n box-shadow: 0 8px 24px rgb(0 0 0 / 12%);\n}\n.ol-editor .ol-menu-item {\n display: block;\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n padding: 6px 10px;\n border: 0;\n border-radius: var(--ol-radius);\n background: transparent;\n color: var(--ol-text);\n font: inherit;\n font-family: var(--ol-font);\n font-size: var(--ol-font-size);\n text-align: start;\n cursor: pointer;\n appearance: none;\n}\n.ol-editor .ol-menu-item:hover,\n.ol-editor .ol-menu-item:focus-visible {\n background: var(--ol-surface-hover);\n outline: none;\n}\n.ol-editor .ol-menu-item[aria-disabled=\"true\"] {\n opacity: 0.4;\n cursor: default;\n}\n.ol-editor .ol-menu-sep {\n height: 1px;\n margin: 4px 0;\n background: var(--ol-border);\n}\n.ol-editor .ol-toolbar.ol-floating {\n position: absolute;\n flex-wrap: nowrap;\n border: 1px solid var(--ol-border);\n border-radius: var(--ol-radius);\n box-shadow: 0 8px 24px rgb(0 0 0 / 12%);\n z-index: calc(var(--ol-z) + 10);\n}\n.ol-editor .ol-toolbar.ol-toolbar--overflow {\n flex-wrap: nowrap;\n overflow: hidden;\n}\n.ol-editor.ol-visual-aids .ol-empty-block {\n outline: 1px dashed var(--ol-border);\n outline-offset: 2px;\n min-height: 1.2em;\n}\n.ol-editor.ol-visual-aids .ol-nbsp {\n background: color-mix(in srgb, var(--ol-accent) 25%, transparent);\n box-shadow: inset 0 -1px 0 var(--ol-accent);\n}\n.ol-editor.ol-visual-aids .ol-hidden-structure {\n outline: 1px dotted var(--ol-accent);\n outline-offset: 2px;\n}\n.ol-editor .ol-noneditable {\n cursor: default;\n background: repeating-linear-gradient(\n -45deg,\n transparent,\n transparent 6px,\n color-mix(in srgb, var(--ol-border) 35%, transparent) 6px,\n color-mix(in srgb, var(--ol-border) 35%, transparent) 7px\n );\n}\n.ol-editor.ol-fullscreen {\n position: fixed;\n inset: 0;\n z-index: 2147483000;\n margin: 0;\n border-radius: 0;\n background: var(--ol-surface);\n display: flex;\n flex-direction: column;\n}\n.ol-editor.ol-fullscreen .ol-content,\n.ol-editor.ol-fullscreen .ol-source {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.ol-editor.ol-autoresize .ol-content .ProseMirror {\n overflow: hidden;\n}\n.ol-editor.ol-inline:not(.ol-inline-active) .ol-toolbar,\n.ol-editor.ol-inline:not(.ol-inline-active) .ol-menubar {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n}\n.ol-editor.ol-inline .ol-content {\n border-radius: var(--ol-radius);\n}\n.ol-help-table {\n width: 100%;\n border-collapse: collapse;\n font: inherit;\n}\n.ol-help-table th,\n.ol-help-table td {\n padding: 4px 8px;\n text-align: start;\n vertical-align: top;\n border-bottom: 1px solid var(--openleaf-color-border, #d1d9e0);\n}\n.ol-help-table th {\n font-weight: 600;\n white-space: nowrap;\n}\n\n/* Coarse pointers get a larger target. WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px\n minimum; 32 clears that on a mouse and 40 is comfortable on a thumb. */\n@media (pointer: coarse) {\n .ol-editor {\n --ol-button-size: var(--openleaf-button-size, 40px);\n --ol-gap: var(--openleaf-gap, 4px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ol-editor .ol-btn {\n transition: none;\n }\n}\n\n/* Forced colours (Windows high contrast) replaces our palette wholesale. The\n pressed state must not depend on a background we no longer control, so it is\n re-expressed as a border, which the mode preserves. */\n@media (forced-colors: active) {\n .ol-editor .ol-btn {\n border-color: ButtonBorder;\n color: ButtonText;\n }\n .ol-editor .ol-btn[aria-pressed=\"true\"] {\n border-color: Highlight;\n color: Highlight;\n box-shadow: none;\n }\n .ol-editor .ol-btn:focus-visible {\n outline-color: Highlight;\n }\n .ol-editor .ol-btn[aria-disabled=\"true\"] {\n color: GrayText;\n opacity: 1;\n }\n}\n";
|
|
98
|
+
export { CSS } from './css.js';
|
|
39
99
|
/**
|
|
40
100
|
* Declare that the integrator has linked `openleaf.css` themselves, so no
|
|
41
101
|
* injection is attempted. Call before the first editor is created.
|
package/dist/styles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AAIH,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAI9B;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CA8CpG;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAM9F"}
|