@lexical/html 0.43.1-nightly.20260416.0 → 0.44.0
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/ContextRecord.d.ts +93 -0
- package/DOMRenderExtension.d.ts +16 -0
- package/LexicalHtml.dev.js +650 -50
- package/LexicalHtml.dev.mjs +638 -49
- package/LexicalHtml.js.flow +178 -11
- package/LexicalHtml.mjs +12 -1
- package/LexicalHtml.node.mjs +12 -1
- package/LexicalHtml.prod.js +1 -1
- package/LexicalHtml.prod.mjs +1 -1
- package/RenderContext.d.ts +32 -0
- package/compileDOMRenderConfigOverrides.d.ts +22 -0
- package/constants.d.ts +10 -0
- package/domOverride.d.ts +18 -0
- package/index.d.ts +17 -0
- package/package.json +5 -4
- package/types.d.ts +293 -0
package/LexicalHtml.js.flow
CHANGED
|
@@ -8,25 +8,192 @@
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
import type {
|
|
11
|
+
AnyLexicalExtension,
|
|
11
12
|
BaseSelection,
|
|
13
|
+
DOMExportOutput,
|
|
14
|
+
EditorDOMRenderConfig,
|
|
15
|
+
ElementDOMSlot,
|
|
12
16
|
LexicalEditor,
|
|
17
|
+
LexicalExtension,
|
|
13
18
|
LexicalNode,
|
|
14
|
-
|
|
15
|
-
EditorThemeClasses,
|
|
19
|
+
StateConfig,
|
|
16
20
|
} from 'lexical';
|
|
17
21
|
|
|
18
|
-
|
|
19
|
-
node: Node,
|
|
20
|
-
searchFn: FindCachedParentDOMNodeSearchFn,
|
|
21
|
-
) => null | Node;
|
|
22
|
-
export type FindCachedParentDOMNodeSearchFn = (node: Node) => boolean;
|
|
22
|
+
// ContextRecord types
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
type AnyContextSymbol = symbol;
|
|
25
|
+
|
|
26
|
+
type ContextRecord<K extends symbol> = {+[string | symbol]: unknown};
|
|
27
|
+
|
|
28
|
+
type ContextConfig<Sym extends symbol, V> = StateConfig<symbol, V>;
|
|
29
|
+
|
|
30
|
+
type ContextConfigUpdater<Ctx extends AnyContextSymbol, V> = {
|
|
31
|
+
+cfg: ContextConfig<Ctx, V>,
|
|
32
|
+
+updater: (prev: V) => V,
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
type ContextConfigPair<Ctx extends AnyContextSymbol, V> = Readonly<
|
|
36
|
+
[ContextConfig<Ctx, V>, V],
|
|
37
|
+
>;
|
|
38
|
+
|
|
39
|
+
export type ContextPairOrUpdater<Ctx extends AnyContextSymbol, V> =
|
|
40
|
+
| ContextConfigPair<Ctx, V>
|
|
41
|
+
| ContextConfigUpdater<Ctx, V>;
|
|
42
|
+
|
|
43
|
+
// $FlowFixMe[unclear-type]
|
|
44
|
+
type AnyContextConfigPairOrUpdater<Ctx extends AnyContextSymbol> =
|
|
45
|
+
// $FlowFixMe[unclear-type]
|
|
46
|
+
ContextPairOrUpdater<Ctx, any>;
|
|
47
|
+
|
|
48
|
+
// Render types
|
|
49
|
+
|
|
50
|
+
export type RenderStateConfig<V> = ContextConfig<symbol, V>;
|
|
51
|
+
|
|
52
|
+
// $FlowFixMe[unclear-type]
|
|
53
|
+
export type AnyRenderStateConfigPairOrUpdater =
|
|
54
|
+
// $FlowFixMe[unclear-type]
|
|
55
|
+
AnyContextConfigPairOrUpdater<any>;
|
|
56
|
+
|
|
57
|
+
// $FlowFixMe[unclear-type]
|
|
58
|
+
export type AnyRenderStateConfig = RenderStateConfig<any>;
|
|
59
|
+
|
|
60
|
+
export type DOMRenderExtensionOutput = {
|
|
61
|
+
defaults: void | ContextRecord<symbol>,
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export type DOMRenderConfig = {
|
|
65
|
+
overrides: AnyDOMRenderMatch[],
|
|
66
|
+
contextDefaults: AnyRenderStateConfigPairOrUpdater[],
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
// $FlowFixMe[unclear-type]
|
|
70
|
+
export type AnyDOMRenderMatch = DOMRenderMatch<any>;
|
|
71
|
+
|
|
72
|
+
export type NodeMatch<T extends LexicalNode> =
|
|
73
|
+
| Class<T>
|
|
74
|
+
| ((node: LexicalNode) => boolean);
|
|
75
|
+
|
|
76
|
+
export type DOMRenderMatch<T extends LexicalNode> = {
|
|
77
|
+
+nodes: '*' | ReadonlyArray<NodeMatch<T>>,
|
|
78
|
+
+$getDOMSlot?: <N extends LexicalNode>(
|
|
79
|
+
node: N,
|
|
80
|
+
dom: HTMLElement,
|
|
81
|
+
$next: () => ElementDOMSlot<HTMLElement>,
|
|
82
|
+
editor: LexicalEditor,
|
|
83
|
+
) => ElementDOMSlot<HTMLElement>,
|
|
84
|
+
+$createDOM?: (
|
|
85
|
+
node: T,
|
|
86
|
+
$next: () => HTMLElement,
|
|
87
|
+
editor: LexicalEditor,
|
|
88
|
+
) => HTMLElement,
|
|
89
|
+
+$updateDOM?: (
|
|
90
|
+
nextNode: T,
|
|
91
|
+
prevNode: T,
|
|
92
|
+
dom: HTMLElement,
|
|
93
|
+
$next: () => boolean,
|
|
94
|
+
editor: LexicalEditor,
|
|
95
|
+
) => boolean,
|
|
96
|
+
+$decorateDOM?: (
|
|
97
|
+
nextNode: T,
|
|
98
|
+
prevNode: T | null,
|
|
99
|
+
dom: HTMLElement,
|
|
100
|
+
editor: LexicalEditor,
|
|
101
|
+
) => void,
|
|
102
|
+
+$exportDOM?: (
|
|
103
|
+
node: T,
|
|
104
|
+
$next: () => DOMExportOutput,
|
|
105
|
+
editor: LexicalEditor,
|
|
106
|
+
) => DOMExportOutput,
|
|
107
|
+
+$shouldExclude?: (
|
|
108
|
+
node: T,
|
|
109
|
+
selection: null | BaseSelection,
|
|
110
|
+
$next: () => boolean,
|
|
111
|
+
editor: LexicalEditor,
|
|
112
|
+
) => boolean,
|
|
113
|
+
+$shouldInclude?: (
|
|
114
|
+
node: T,
|
|
115
|
+
selection: null | BaseSelection,
|
|
116
|
+
$next: () => boolean,
|
|
117
|
+
editor: LexicalEditor,
|
|
118
|
+
) => boolean,
|
|
119
|
+
+$extractWithChild?: (
|
|
120
|
+
node: T,
|
|
121
|
+
childNode: LexicalNode,
|
|
122
|
+
selection: null | BaseSelection,
|
|
123
|
+
destination: 'clone' | 'html',
|
|
124
|
+
$next: () => boolean,
|
|
125
|
+
editor: LexicalEditor,
|
|
126
|
+
) => boolean,
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
// contextUpdater, contextValue
|
|
130
|
+
|
|
131
|
+
declare export function contextUpdater<Ctx extends AnyContextSymbol, V>(
|
|
132
|
+
cfg: ContextConfig<Ctx, V>,
|
|
133
|
+
updater: (prev: V) => V,
|
|
134
|
+
): ContextConfigUpdater<Ctx, V>;
|
|
135
|
+
|
|
136
|
+
declare export function contextValue<Ctx extends AnyContextSymbol, V>(
|
|
137
|
+
cfg: ContextConfig<Ctx, V>,
|
|
138
|
+
value: V,
|
|
139
|
+
): ContextConfigPair<Ctx, V>;
|
|
140
|
+
|
|
141
|
+
// domOverride
|
|
142
|
+
|
|
143
|
+
declare export function domOverride(
|
|
144
|
+
nodes: '*',
|
|
145
|
+
config: Omit<DOMRenderMatch<LexicalNode>, 'nodes'>,
|
|
146
|
+
): DOMRenderMatch<LexicalNode>;
|
|
147
|
+
declare export function domOverride<T extends LexicalNode>(
|
|
148
|
+
nodes: ReadonlyArray<NodeMatch<T>>,
|
|
149
|
+
config: Omit<DOMRenderMatch<T>, 'nodes'>,
|
|
150
|
+
): DOMRenderMatch<T>;
|
|
151
|
+
|
|
152
|
+
// DOMRenderExtension
|
|
153
|
+
|
|
154
|
+
declare export var DOMRenderExtension: LexicalExtension<
|
|
155
|
+
DOMRenderConfig,
|
|
156
|
+
'@lexical/html/DOM',
|
|
157
|
+
DOMRenderExtensionOutput,
|
|
158
|
+
void,
|
|
159
|
+
>;
|
|
160
|
+
|
|
161
|
+
// RenderContext
|
|
162
|
+
|
|
163
|
+
declare export var RenderContextExport: RenderStateConfig<boolean>;
|
|
164
|
+
declare export var RenderContextRoot: RenderStateConfig<boolean>;
|
|
165
|
+
|
|
166
|
+
declare export function $getRenderContextValue<V>(
|
|
167
|
+
cfg: RenderStateConfig<V>,
|
|
168
|
+
editor?: LexicalEditor,
|
|
169
|
+
): V;
|
|
170
|
+
|
|
171
|
+
declare export function $withRenderContext(
|
|
172
|
+
cfg: ReadonlyArray<AnyRenderStateConfigPairOrUpdater>,
|
|
173
|
+
editor?: LexicalEditor,
|
|
174
|
+
): <T>(f: () => T) => T;
|
|
175
|
+
|
|
176
|
+
// Existing exports
|
|
28
177
|
|
|
29
178
|
declare export function $generateNodesFromDOM(
|
|
30
179
|
editor: LexicalEditor,
|
|
31
180
|
dom: Document,
|
|
32
181
|
): Array<LexicalNode>;
|
|
182
|
+
|
|
183
|
+
declare export function $generateDOMFromNodes<
|
|
184
|
+
T extends HTMLElement | DocumentFragment,
|
|
185
|
+
>(
|
|
186
|
+
container: T,
|
|
187
|
+
selection?: null | BaseSelection,
|
|
188
|
+
editor?: LexicalEditor,
|
|
189
|
+
): T;
|
|
190
|
+
|
|
191
|
+
declare export function $generateDOMFromRoot<T extends HTMLElement | DocumentFragment>(
|
|
192
|
+
container: T, root?: LexicalNode,
|
|
193
|
+
): T;
|
|
194
|
+
|
|
195
|
+
declare export function $generateHtmlFromNodes(
|
|
196
|
+
editor: LexicalEditor,
|
|
197
|
+
selection?: BaseSelection | null,
|
|
198
|
+
): string;
|
|
199
|
+
|
package/LexicalHtml.mjs
CHANGED
|
@@ -9,5 +9,16 @@
|
|
|
9
9
|
import * as modDev from './LexicalHtml.dev.mjs';
|
|
10
10
|
import * as modProd from './LexicalHtml.prod.mjs';
|
|
11
11
|
const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
|
|
12
|
+
export const $generateDOMFromNodes = mod.$generateDOMFromNodes;
|
|
13
|
+
export const $generateDOMFromRoot = mod.$generateDOMFromRoot;
|
|
12
14
|
export const $generateHtmlFromNodes = mod.$generateHtmlFromNodes;
|
|
13
|
-
export const $generateNodesFromDOM = mod.$generateNodesFromDOM;
|
|
15
|
+
export const $generateNodesFromDOM = mod.$generateNodesFromDOM;
|
|
16
|
+
export const $getRenderContextValue = mod.$getRenderContextValue;
|
|
17
|
+
export const $withRenderContext = mod.$withRenderContext;
|
|
18
|
+
export const DOMRenderExtension = mod.DOMRenderExtension;
|
|
19
|
+
export const RenderContextExport = mod.RenderContextExport;
|
|
20
|
+
export const RenderContextRoot = mod.RenderContextRoot;
|
|
21
|
+
export const contextUpdater = mod.contextUpdater;
|
|
22
|
+
export const contextValue = mod.contextValue;
|
|
23
|
+
export const createRenderState = mod.createRenderState;
|
|
24
|
+
export const domOverride = mod.domOverride;
|
package/LexicalHtml.node.mjs
CHANGED
|
@@ -7,5 +7,16 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalHtml.dev.mjs') : import('./LexicalHtml.prod.mjs'));
|
|
10
|
+
export const $generateDOMFromNodes = mod.$generateDOMFromNodes;
|
|
11
|
+
export const $generateDOMFromRoot = mod.$generateDOMFromRoot;
|
|
10
12
|
export const $generateHtmlFromNodes = mod.$generateHtmlFromNodes;
|
|
11
|
-
export const $generateNodesFromDOM = mod.$generateNodesFromDOM;
|
|
13
|
+
export const $generateNodesFromDOM = mod.$generateNodesFromDOM;
|
|
14
|
+
export const $getRenderContextValue = mod.$getRenderContextValue;
|
|
15
|
+
export const $withRenderContext = mod.$withRenderContext;
|
|
16
|
+
export const DOMRenderExtension = mod.DOMRenderExtension;
|
|
17
|
+
export const RenderContextExport = mod.RenderContextExport;
|
|
18
|
+
export const RenderContextRoot = mod.RenderContextRoot;
|
|
19
|
+
export const contextUpdater = mod.contextUpdater;
|
|
20
|
+
export const contextValue = mod.contextValue;
|
|
21
|
+
export const createRenderState = mod.createRenderState;
|
|
22
|
+
export const domOverride = mod.domOverride;
|
package/LexicalHtml.prod.js
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var e=require("@lexical/selection"),t=require("
|
|
9
|
+
"use strict";var e=require("@lexical/selection"),t=require("lexical"),n=require("@lexical/extension");function o(e,...t){const n=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",e);for(const e of t)o.append("v",e);throw n.search=o.toString(),Error(`Minified Lexical error #${e}; visit ${n.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}let r;function i(e,t){const{key:n}=t;return e&&n in e?e[n]:t.defaultValue}function s(e){return r&&r.editor===e?r:void 0}function c(e,t){if("cfg"in t){const{cfg:n,updater:o}=t;return[n,o(i(e,n))]}return t}function l(e,t){let n=t;for(const o of e){const[e,r]=c(n,o),s=e.key;if(n===t&&i(n,e)===r)continue;const l=n||u(t);l[s]=r,n=l}return n}function u(e){return Object.create(e||null)}function f(e,t){return[e,t]}const d="@lexical/html/DOM",a=Symbol.for("@lexical/html/DOMExportContext"),p=()=>!0;function g(e){return t=>t instanceof e}function h(e,{nodes:t}){if("*"===t)return p;let n={};const r=[];for(const i of t)if("getType"in i){const t=i.getType();if(n){const r=e[t];void 0===r&&o(339,i.name,t),n=Object.assign(n,r.types)}r.push(g(i))}else n=void 0,r.push(i);return n||(1===r.length?r[0]:e=>{for(const t of r)if(t(e))return!0;return!1})}function m(e){return(t,n,o)=>e(t,o)}function x(e){return(t,n,o,r)=>e(t,n,r)}function y(e){return(t,n,o,r,i)=>e(t,n,o,i)}function $(e){return(t,n,o,r,i,s)=>e(t,n,o,r,s)}function N(e,t){return(n,o)=>{const r=()=>e(n,o),i=t(n);return i?i(n,r,o):r()}}function D(e,t){return(n,o,r)=>{const i=()=>e(n,o,r),s=t(n);return s?s(n,o,i,r):i()}}function O(e,t){return(n,o,r,i)=>{const s=()=>e(n,o,r,i),c=t(n);return c?c(n,o,r,s,i):s()}}function E(e,t){return(n,o,r,i,s)=>{const c=()=>e(n,o,r,i,s),l=t(n);return l?l(n,o,r,i,c,s):c()}}function M(e,t){return(n,o,r,i)=>{e(n,o,r,i);const s=t(n);s&&s(n,o,r,i)}}function S(e,t,n,o,r){let i=n[t];for(const n of e[t])if("function"==typeof n[0]){const[e,t]=n;i=o(i,n=>e(n)&&t||void 0)}else{const e=n[1],t={};for(const n in e){const r=e[n];r&&(t[n]=r.reduce((e,t)=>o(e,()=>t),i))}i=o(i,e=>{const n=t[e.getType()];return n&&r(n)})}n[t]=i}function v(e,t,n,o){if(!o)return;const r=e[t];if("function"==typeof n)r.push([n,o]);else{const e=r[r.length-1];let t;e&&"types"===e[0]?t=e[1]:(t={},r.push(["types",t]));for(const e in n){const n=t[e]||[];t[e]=n,n.push(o)}}}function C(e){return"*"===e.nodes}function b(e,o){const r=function(e){const o={},{nodes:r}=n.getKnownTypesAndNodes(e);for(const e of r)o[e.getType()]={klass:e,types:{}};for(const e of Object.values(o))if(e){const n=e.klass.getType();for(let{klass:r}=e;t.$isLexicalNode(r.prototype);r=Object.getPrototypeOf(r)){const{ownNodeType:e}=t.getStaticNodeConfig(r),i=e&&o[e];i&&(i.types[n]=!0)}}return o}(e),i={$createDOM:[],$decorateDOM:[],$exportDOM:[],$extractWithChild:[],$getDOMSlot:[],$shouldExclude:[],$shouldInclude:[],$updateDOM:[]};for(const e of function(e){const n=[],o=[],r=[];for(const i of e)if(C(i))n.push(i);else if(Array.isArray(i.nodes))for(const e of i.nodes)t.$isLexicalNode(e.prototype)?r.push(1===i.nodes.length?i:{...i,nodes:[e]}):o.push(1===i.nodes.length?i:{...i,nodes:[e]});const i=new Map,s=e=>{let n=i.get(e);if(void 0===n){n=0;for(let o=e;t.$isLexicalNode(o.prototype);o=Object.getPrototypeOf(o))n++;i.set(e,n)}return n};return r.sort((e,t)=>s(e.nodes[0])-s(t.nodes[0])),[...r,...o,...n]}(o)){const t=h(r,e);for(const n in i){v(i,n,t,e[n])}}return i}function w(e){return e}const R=t.defineExtension({build:(e,t,n)=>({defaults:l(t.contextDefaults,void 0)}),config:{contextDefaults:[],overrides:[]},html:{export:new Map([[t.RootNode,()=>{const e=document.createElement("div");return e.role="textbox",{element:e}}]])},init(e,n){e.dom=function(e,{overrides:n}){const o=b(e,n),r={...t.DEFAULT_EDITOR_DOM_CONFIG,...e.dom};return S(o,"$createDOM",r,N,m),S(o,"$exportDOM",r,N,m),S(o,"$extractWithChild",r,E,$),S(o,"$getDOMSlot",r,D,x),S(o,"$shouldExclude",r,D,x),S(o,"$shouldInclude",r,D,x),S(o,"$updateDOM",r,O,y),S(o,"$decorateDOM",r,M,w),r}(e,n)},mergeConfig(e,n){const o=t.shallowMergeConfig(e,n);for(const t of["overrides","contextDefaults"])n[t]&&(o[t]=[...e[t],...n[t]]);return o},name:d});function T(e,n,o){return function(e,n,o,r){return Object.assign(t.createState(Symbol(n),{isEqual:r,parse:o}),{[e]:!0})}(a,e,n,o)}const A=T("root",Boolean),L=T("isExport",Boolean);function F(e){const t=n.LexicalBuilder.maybeFromEditor(e);return t&&t.hasExtensionByName(d)?n.getExtensionDependencyFromEditor(e,R).output.defaults:void 0}function k(e){return function(e,t){const n=s(t);return n&&n[e]}(a,e)||F(e)}const P=function(e,n=()=>{}){return(o,i=t.$getEditor())=>c=>{const u=s(i),f=u&&u[e],d=l(o,f||n(i));return d&&d!==f?function(e,n,o,i=t.$getEditor()){const c=r,l=s(i);try{return r={...l,editor:i,[e]:n},o()}finally{r=c}}(e,d,c,i):c()}}(a,F);function _(e){return e.constructor.name===CSSStyleRule.name}const B=new Set(["STYLE","SCRIPT"]);function I(e,n=null,o=t.$getEditor()){return P([f(L,!0)],o)(()=>{const r=t.$getRoot(),i=t.$getEditorDOMRenderConfig(o),s=e.append.bind(e);for(const e of r.getChildren())j(o,e,s,n,i);return e})}function j(n,o,r,i=null,s=t.$getEditorDOMRenderConfig(n)){let c=s.$shouldInclude(o,i,n);const l=s.$shouldExclude(o,i,n);let u=o;null!==i&&t.$isTextNode(o)&&(u=e.$sliceSelectedTextNodeContent(i,o,"clone"));const f=s.$exportDOM(u,n),{element:d,after:a,append:p,$getChildNodes:g}=f;if(!d)return!1;const h=document.createDocumentFragment(),m=g?g():t.$isElementNode(u)?u.getChildren():[],x=h.append.bind(h);for(const e of m){const t=j(n,e,x,i,s);!c&&t&&s.$extractWithChild(o,e,i,"html",n)&&(c=!0)}if(c&&!l){if((t.isHTMLElement(d)||t.isDocumentFragment(d))&&(p?p(h):d.append(h)),r(d),a){const e=a.call(u,d);e&&(t.isDocumentFragment(d)?d.replaceChildren(e):d.replaceWith(e))}}else r(h);return c}function q(e,n,o,r,i=new Map,s){const c=[];if(B.has(e.nodeName))return c;let l=null;const u=function(e,t){const{nodeName:n}=e,o=t._htmlConversions.get(n.toLowerCase());let r=null;if(void 0!==o)for(const t of o){const n=t(e);null!==n&&(null===r||(r.priority||0)<=(n.priority||0))&&(r=n)}return null!==r?r.conversion:null}(e,n),f=u?u(e):null;let d=null;if(null!==f){d=f.after;const t=f.node;if(l=Array.isArray(t)?t[t.length-1]:t,null!==l){for(const[,e]of i)if(l=e(l,s),!l)break;l&&c.push(...Array.isArray(t)?t:[l])}null!=f.forChild&&i.set(e.nodeName,f.forChild)}const a=e.childNodes;let p=[];const g=(null==l||!t.$isRootOrShadowRoot(l))&&(null!=l&&t.$isBlockElementNode(l)||r);for(let e=0;e<a.length;e++)p.push(...q(a[e],n,o,g,new Map(i),l));if(null!=d&&(p=d(p)),t.isBlockDomNode(e)&&(p=U(e,p,g?()=>{const e=new t.ArtificialNode__DO_NOT_USE;return o.push(e),e}:t.$createParagraphNode)),null==l)if(p.length>0)for(const e of p)c.push(e);else t.isBlockDomNode(e)&&function(e){if(null==e.nextSibling||null==e.previousSibling)return!1;return t.isInlineDomNode(e.nextSibling)&&t.isInlineDomNode(e.previousSibling)}(e)&&c.push(t.$createLineBreakNode());else t.$isElementNode(l)&&l.append(...p);return c}function U(e,n,o){const r=e.style.textAlign,i=[];let s=[];for(let e=0;e<n.length;e++){const c=n[e];if(t.$isBlockElementNode(c))r&&!c.getFormat()&&c.setFormat(r),i.push(c);else if(s.push(c),e===n.length-1||e<n.length-1&&t.$isBlockElementNode(n[e+1])){const e=o();e.setFormat(r),e.append(...s),i.push(e),s=[]}}return i}exports.$generateDOMFromNodes=I,exports.$generateDOMFromRoot=function(e,n=t.$getRoot()){const o=t.$getEditor();return P([f(L,!0),f(A,!0)],o)(()=>{const r=t.$getEditorDOMRenderConfig(o),i=e.append.bind(e);return j(o,n,i,null,r),e})},exports.$generateHtmlFromNodes=function(e,t=null){return("undefined"==typeof document||"undefined"==typeof window&&void 0===global.window)&&o(338),I(document.createElement("div"),t,e).innerHTML},exports.$generateNodesFromDOM=function(e,n){t.isDOMDocumentNode(n)&&function(e){if(null===e.querySelector("style"))return;const n=new Map;function o(e){let t=n.get(e);if(void 0===t){t=new Set;for(let n=0;n<e.style.length;n++)t.add(e.style[n]);n.set(e,t)}return t}try{for(const n of Array.from(e.styleSheets)){let r;try{r=n.cssRules}catch(e){continue}for(const n of Array.from(r)){if(!_(n))continue;let r;try{r=e.querySelectorAll(n.selectorText)}catch(e){continue}for(const e of Array.from(r)){if(!t.isHTMLElement(e))continue;const r=o(e);for(let t=0;t<n.style.length;t++){const o=n.style[t];r.has(o)||e.style.setProperty(o,n.style.getPropertyValue(o),n.style.getPropertyPriority(o))}}}}}catch(e){}}(n);const o=t.isDOMDocumentNode(n)?n.body.childNodes:n.childNodes,r=[],i=[];for(const t of o)if(!B.has(t.nodeName)){const n=q(t,e,i,!1);if(null!==n)for(const e of n)r.push(e)}return function(e){for(const n of e)n.getParent()&&n.getNextSibling()instanceof t.ArtificialNode__DO_NOT_USE&&n.insertAfter(t.$createLineBreakNode());for(const t of e){const e=t.getParent();e&&e.splice(t.getIndexWithinParent(),1,t.getChildren())}}(i),r},exports.$getRenderContextValue=function(e,n=t.$getEditor()){return i(k(n),e)},exports.$withRenderContext=P,exports.DOMRenderExtension=R,exports.RenderContextExport=L,exports.RenderContextRoot=A,exports.contextUpdater=function(e,t){return{cfg:e,updater:t}},exports.contextValue=f,exports.createRenderState=T,exports.domOverride=function(e,t){return{...t,nodes:e}};
|
package/LexicalHtml.prod.mjs
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{$sliceSelectedTextNodeContent as
|
|
9
|
+
import{$sliceSelectedTextNodeContent as t}from"@lexical/selection";import{$getEditor as n,createState as e,DEFAULT_EDITOR_DOM_CONFIG as o,$isLexicalNode as r,getStaticNodeConfig as c,defineExtension as s,shallowMergeConfig as u,RootNode as i,$getRoot as l,$getEditorDOMRenderConfig as f,isDOMDocumentNode as d,$isTextNode as a,$isElementNode as p,isHTMLElement as h,isDocumentFragment as y,$isRootOrShadowRoot as g,$isBlockElementNode as m,isBlockDomNode as x,$createLineBreakNode as v,ArtificialNode__DO_NOT_USE as $,isInlineDomNode as b,$createParagraphNode as S}from"lexical";import{getKnownTypesAndNodes as O,LexicalBuilder as M,getExtensionDependencyFromEditor as w}from"@lexical/extension";function D(t,...n){const e=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",t);for(const t of n)o.append("v",t);throw e.search=o.toString(),Error(`Minified Lexical error #${t}; visit ${e.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}let C;function A(t,n){const{key:e}=n;return t&&e in t?t[e]:n.defaultValue}function E(t){return C&&C.editor===t?C:void 0}function N(t,n){if("cfg"in n){const{cfg:e,updater:o}=n;return[e,o(A(t,e))]}return n}function P(t,n){let e=n;for(const o of t){const[t,r]=N(e,o),c=t.key;if(e===n&&A(e,t)===r)continue;const s=e||T(n);s[c]=r,e=s}return e}function T(t){return Object.create(t||null)}function j(t,n){return[t,n]}function k(t,n){return{cfg:t,updater:n}}const L="@lexical/html/DOM",F=Symbol.for("@lexical/html/DOMExportContext"),I=()=>!0;function R(t){return n=>n instanceof t}function W(t,{nodes:n}){if("*"===n)return I;let e={};const o=[];for(const r of n)if("getType"in r){const n=r.getType();if(e){const o=t[n];void 0===o&&D(339,r.name,n),e=Object.assign(e,o.types)}o.push(R(r))}else e=void 0,o.push(r);return e||(1===o.length?o[0]:t=>{for(const n of o)if(n(t))return!0;return!1})}function q(t){return(n,e,o)=>t(n,o)}function B(t){return(n,e,o,r)=>t(n,e,r)}function U(t){return(n,e,o,r,c)=>t(n,e,o,c)}function V(t){return(n,e,o,r,c,s)=>t(n,e,o,r,s)}function H(t,n){return(e,o)=>{const r=()=>t(e,o),c=n(e);return c?c(e,r,o):r()}}function Y(t,n){return(e,o,r)=>{const c=()=>t(e,o,r),s=n(e);return s?s(e,o,c,r):c()}}function _(t,n){return(e,o,r,c)=>{const s=()=>t(e,o,r,c),u=n(e);return u?u(e,o,r,s,c):s()}}function z(t,n){return(e,o,r,c,s)=>{const u=()=>t(e,o,r,c,s),i=n(e);return i?i(e,o,r,c,u,s):u()}}function G(t,n){return(e,o,r,c)=>{t(e,o,r,c);const s=n(e);s&&s(e,o,r,c)}}function J(t,n,e,o,r){let c=e[n];for(const e of t[n])if("function"==typeof e[0]){const[t,n]=e;c=o(c,e=>t(e)&&n||void 0)}else{const t=e[1],n={};for(const e in t){const r=t[e];r&&(n[e]=r.reduce((t,n)=>o(t,()=>n),c))}c=o(c,t=>{const e=n[t.getType()];return e&&r(e)})}e[n]=c}function K(t,n,e,o){if(!o)return;const r=t[n];if("function"==typeof e)r.push([e,o]);else{const t=r[r.length-1];let n;t&&"types"===t[0]?n=t[1]:(n={},r.push(["types",n]));for(const t in e){const e=n[t]||[];n[t]=e,e.push(o)}}}function Q(t){return"*"===t.nodes}function X(t,n){const e=function(t){const n={},{nodes:e}=O(t);for(const t of e)n[t.getType()]={klass:t,types:{}};for(const t of Object.values(n))if(t){const e=t.klass.getType();for(let{klass:o}=t;r(o.prototype);o=Object.getPrototypeOf(o)){const{ownNodeType:t}=c(o),r=t&&n[t];r&&(r.types[e]=!0)}}return n}(t),o={$createDOM:[],$decorateDOM:[],$exportDOM:[],$extractWithChild:[],$getDOMSlot:[],$shouldExclude:[],$shouldInclude:[],$updateDOM:[]};for(const t of function(t){const n=[],e=[],o=[];for(const c of t)if(Q(c))n.push(c);else if(Array.isArray(c.nodes))for(const t of c.nodes)r(t.prototype)?o.push(1===c.nodes.length?c:{...c,nodes:[t]}):e.push(1===c.nodes.length?c:{...c,nodes:[t]});const c=new Map,s=t=>{let n=c.get(t);if(void 0===n){n=0;for(let e=t;r(e.prototype);e=Object.getPrototypeOf(e))n++;c.set(t,n)}return n};return o.sort((t,n)=>s(t.nodes[0])-s(n.nodes[0])),[...o,...e,...n]}(n)){const n=W(e,t);for(const e in o){K(o,e,n,t[e])}}return o}function Z(t){return t}const tt=s({build:(t,n,e)=>({defaults:P(n.contextDefaults,void 0)}),config:{contextDefaults:[],overrides:[]},html:{export:new Map([[i,()=>{const t=document.createElement("div");return t.role="textbox",{element:t}}]])},init(t,n){t.dom=function(t,{overrides:n}){const e=X(t,n),r={...o,...t.dom};return J(e,"$createDOM",r,H,q),J(e,"$exportDOM",r,H,q),J(e,"$extractWithChild",r,z,V),J(e,"$getDOMSlot",r,Y,B),J(e,"$shouldExclude",r,Y,B),J(e,"$shouldInclude",r,Y,B),J(e,"$updateDOM",r,_,U),J(e,"$decorateDOM",r,G,Z),r}(t,n)},mergeConfig(t,n){const e=u(t,n);for(const o of["overrides","contextDefaults"])n[o]&&(e[o]=[...t[o],...n[o]]);return e},name:L});function nt(t,n,o){return function(t,n,o,r){return Object.assign(e(Symbol(n),{isEqual:r,parse:o}),{[t]:!0})}(F,t,n,o)}const et=nt("root",Boolean),ot=nt("isExport",Boolean);function rt(t){const n=M.maybeFromEditor(t);return n&&n.hasExtensionByName(L)?w(t,tt).output.defaults:void 0}function ct(t){return function(t,n){const e=E(n);return e&&e[t]}(F,t)||rt(t)}function st(t,e=n()){return A(ct(e),t)}const ut=function(t,e=()=>{}){return(o,r=n())=>c=>{const s=E(r),u=s&&s[t],i=P(o,u||e(r));return i&&i!==u?function(t,e,o,r=n()){const c=C,s=E(r);try{return C={...s,editor:r,[t]:e},o()}finally{C=c}}(t,i,c,r):c()}}(F,rt);function it(t,n){return{...n,nodes:t}}function lt(t){return t.constructor.name===CSSStyleRule.name}const ft=new Set(["STYLE","SCRIPT"]);function dt(t,n){d(n)&&function(t){if(null===t.querySelector("style"))return;const n=new Map;function e(t){let e=n.get(t);if(void 0===e){e=new Set;for(let n=0;n<t.style.length;n++)e.add(t.style[n]);n.set(t,e)}return e}try{for(const n of Array.from(t.styleSheets)){let o;try{o=n.cssRules}catch(t){continue}for(const n of Array.from(o)){if(!lt(n))continue;let o;try{o=t.querySelectorAll(n.selectorText)}catch(t){continue}for(const t of Array.from(o)){if(!h(t))continue;const o=e(t);for(let e=0;e<n.style.length;e++){const r=n.style[e];o.has(r)||t.style.setProperty(r,n.style.getPropertyValue(r),n.style.getPropertyPriority(r))}}}}}catch(t){}}(n);const e=d(n)?n.body.childNodes:n.childNodes,o=[],r=[];for(const n of e)if(!ft.has(n.nodeName)){const e=gt(n,t,r,!1);if(null!==e)for(const t of e)o.push(t)}return function(t){for(const n of t)n.getParent()&&n.getNextSibling()instanceof $&&n.insertAfter(v());for(const n of t){const t=n.getParent();t&&t.splice(n.getIndexWithinParent(),1,n.getChildren())}}(r),o}function at(t,e=null,o=n()){return ut([j(ot,!0)],o)(()=>{const n=l(),r=f(o),c=t.append.bind(t);for(const t of n.getChildren())yt(o,t,c,e,r);return t})}function pt(t,e=l()){const o=n();return ut([j(ot,!0),j(et,!0)],o)(()=>{const n=f(o),r=t.append.bind(t);return yt(o,e,r,null,n),t})}function ht(t,n=null){return("undefined"==typeof document||"undefined"==typeof window&&void 0===global.window)&&D(338),at(document.createElement("div"),n,t).innerHTML}function yt(n,e,o,r=null,c=f(n)){let s=c.$shouldInclude(e,r,n);const u=c.$shouldExclude(e,r,n);let i=e;null!==r&&a(e)&&(i=t(r,e,"clone"));const l=c.$exportDOM(i,n),{element:d,after:g,append:m,$getChildNodes:x}=l;if(!d)return!1;const v=document.createDocumentFragment(),$=x?x():p(i)?i.getChildren():[],b=v.append.bind(v);for(const t of $){const o=yt(n,t,b,r,c);!s&&o&&c.$extractWithChild(e,t,r,"html",n)&&(s=!0)}if(s&&!u){if((h(d)||y(d))&&(m?m(v):d.append(v)),o(d),g){const t=g.call(i,d);t&&(y(d)?d.replaceChildren(t):d.replaceWith(t))}}else o(v);return s}function gt(t,n,e,o,r=new Map,c){const s=[];if(ft.has(t.nodeName))return s;let u=null;const i=function(t,n){const{nodeName:e}=t,o=n._htmlConversions.get(e.toLowerCase());let r=null;if(void 0!==o)for(const n of o){const e=n(t);null!==e&&(null===r||(r.priority||0)<=(e.priority||0))&&(r=e)}return null!==r?r.conversion:null}(t,n),l=i?i(t):null;let f=null;if(null!==l){f=l.after;const n=l.node;if(u=Array.isArray(n)?n[n.length-1]:n,null!==u){for(const[,t]of r)if(u=t(u,c),!u)break;u&&s.push(...Array.isArray(n)?n:[u])}null!=l.forChild&&r.set(t.nodeName,l.forChild)}const d=t.childNodes;let a=[];const h=(null==u||!g(u))&&(null!=u&&m(u)||o);for(let t=0;t<d.length;t++)a.push(...gt(d[t],n,e,h,new Map(r),u));if(null!=f&&(a=f(a)),x(t)&&(a=mt(t,a,h?()=>{const t=new $;return e.push(t),t}:S)),null==u)if(a.length>0)for(const t of a)s.push(t);else x(t)&&function(t){if(null==t.nextSibling||null==t.previousSibling)return!1;return b(t.nextSibling)&&b(t.previousSibling)}(t)&&s.push(v());else p(u)&&u.append(...a);return s}function mt(t,n,e){const o=t.style.textAlign,r=[];let c=[];for(let t=0;t<n.length;t++){const s=n[t];if(m(s))o&&!s.getFormat()&&s.setFormat(o),r.push(s);else if(c.push(s),t===n.length-1||t<n.length-1&&m(n[t+1])){const t=e();t.setFormat(o),t.append(...c),r.push(t),c=[]}}return r}export{at as $generateDOMFromNodes,pt as $generateDOMFromRoot,ht as $generateHtmlFromNodes,dt as $generateNodesFromDOM,st as $getRenderContextValue,ut as $withRenderContext,tt as DOMRenderExtension,ot as RenderContextExport,et as RenderContextRoot,k as contextUpdater,j as contextValue,nt as createRenderState,it as domOverride};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { LexicalEditor } from 'lexical';
|
|
2
|
+
import { AnyRenderStateConfigPairOrUpdater, RenderStateConfig } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Create a context state to be used during render.
|
|
5
|
+
*
|
|
6
|
+
* Note that to support the ValueOrUpdater pattern you can not use a
|
|
7
|
+
* function for V (but you may wrap it in an array or object).
|
|
8
|
+
*
|
|
9
|
+
* @experimental
|
|
10
|
+
* @__NO_SIDE_EFFECTS__
|
|
11
|
+
*/
|
|
12
|
+
export declare function createRenderState<V>(name: string, getDefaultValue: () => V, isEqual?: (a: V, b: V) => boolean): RenderStateConfig<V>;
|
|
13
|
+
/**
|
|
14
|
+
* Render context state that is true if the export was initiated from the root of the document.
|
|
15
|
+
* @experimental
|
|
16
|
+
*/
|
|
17
|
+
export declare const RenderContextRoot: RenderStateConfig<boolean>;
|
|
18
|
+
/**
|
|
19
|
+
* Render context state that is true if this is an export operation ($generateHtmlFromNodes).
|
|
20
|
+
* @experimental
|
|
21
|
+
*/
|
|
22
|
+
export declare const RenderContextExport: RenderStateConfig<boolean>;
|
|
23
|
+
/**
|
|
24
|
+
* Get a render context value during a DOM render or export operation.
|
|
25
|
+
* @experimental
|
|
26
|
+
*/
|
|
27
|
+
export declare function $getRenderContextValue<V>(cfg: RenderStateConfig<V>, editor?: LexicalEditor): V;
|
|
28
|
+
/**
|
|
29
|
+
* Execute a callback within a render context with the given config pairs.
|
|
30
|
+
* @experimental
|
|
31
|
+
*/
|
|
32
|
+
export declare const $withRenderContext: (cfg: readonly AnyRenderStateConfigPairOrUpdater[], editor?: LexicalEditor) => <T>(f: () => T) => T;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { type EditorDOMRenderConfig, InitialEditorConfig, Klass, type LexicalNode } from 'lexical';
|
|
2
|
+
import { AnyDOMRenderMatch, DOMRenderConfig } from './types';
|
|
3
|
+
interface TypeRecord {
|
|
4
|
+
readonly klass: Klass<LexicalNode>;
|
|
5
|
+
readonly types: {
|
|
6
|
+
[NodeAndSubclasses in string]?: boolean;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
type TypeTree = {
|
|
10
|
+
[NodeType in string]?: TypeRecord;
|
|
11
|
+
};
|
|
12
|
+
export declare function buildTypeTree(editorConfig: Pick<InitialEditorConfig, 'nodes'>): TypeTree;
|
|
13
|
+
type TypeRender<T> = {
|
|
14
|
+
[NodeType in string]?: T[];
|
|
15
|
+
};
|
|
16
|
+
type AnyRender<T> = readonly [(node: LexicalNode) => boolean, T] | readonly ['types', TypeRender<T>];
|
|
17
|
+
type PreEditorDOMRenderConfig = {
|
|
18
|
+
[K in keyof EditorDOMRenderConfig]: AnyRender<AnyDOMRenderMatch[K]>[];
|
|
19
|
+
};
|
|
20
|
+
export declare function precompileDOMRenderConfigOverrides(editorConfig: Pick<InitialEditorConfig, 'nodes'>, overrides: DOMRenderConfig['overrides']): PreEditorDOMRenderConfig;
|
|
21
|
+
export declare function compileDOMRenderConfigOverrides(editorConfig: InitialEditorConfig, { overrides }: DOMRenderConfig): EditorDOMRenderConfig;
|
|
22
|
+
export {};
|
package/constants.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
export declare const DOMRenderExtensionName = "@lexical/html/DOM";
|
|
9
|
+
export declare const DOMRenderContextSymbol: unique symbol;
|
|
10
|
+
export declare const ALWAYS_TRUE: () => true;
|
package/domOverride.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import type { DOMRenderMatch, NodeMatch } from './types';
|
|
9
|
+
import type { LexicalNode } from 'lexical';
|
|
10
|
+
/**
|
|
11
|
+
* A convenience function for type inference when constructing DOM overrides for
|
|
12
|
+
* use with {@link DOMRenderExtension}.
|
|
13
|
+
*
|
|
14
|
+
* @experimental
|
|
15
|
+
* @__NO_SIDE_EFFECTS__
|
|
16
|
+
*/
|
|
17
|
+
export declare function domOverride(nodes: '*', config: Omit<DOMRenderMatch<LexicalNode>, 'nodes'>): DOMRenderMatch<LexicalNode>;
|
|
18
|
+
export declare function domOverride<T extends LexicalNode>(nodes: readonly NodeMatch<T>[], config: Omit<DOMRenderMatch<T>, 'nodes'>): DOMRenderMatch<T>;
|
package/index.d.ts
CHANGED
|
@@ -6,10 +6,27 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import type { BaseSelection, LexicalEditor, LexicalNode } from 'lexical';
|
|
9
|
+
export { contextUpdater, contextValue } from './ContextRecord';
|
|
10
|
+
export { domOverride } from './domOverride';
|
|
11
|
+
export { DOMRenderExtension } from './DOMRenderExtension';
|
|
12
|
+
export { $getRenderContextValue, $withRenderContext, createRenderState, RenderContextExport, RenderContextRoot, } from './RenderContext';
|
|
13
|
+
export type { AnyDOMRenderMatch, AnyRenderStateConfig, AnyRenderStateConfigPairOrUpdater, ContextPairOrUpdater, DOMRenderConfig, DOMRenderExtensionOutput, DOMRenderMatch, NodeMatch, } from './types';
|
|
9
14
|
/**
|
|
10
15
|
* How you parse your html string to get a document is left up to you. In the browser you can use the native
|
|
11
16
|
* DOMParser API to generate a document (see clipboard.ts), but to use in a headless environment you can use JSDom
|
|
12
17
|
* or an equivalent library and pass in the document here.
|
|
13
18
|
*/
|
|
14
19
|
export declare function $generateNodesFromDOM(editor: LexicalEditor, dom: Document | ParentNode): Array<LexicalNode>;
|
|
20
|
+
/**
|
|
21
|
+
* Generate DOM nodes from the editor state into the given container element,
|
|
22
|
+
* using the editor's {@link EditorDOMRenderConfig}.
|
|
23
|
+
* @experimental
|
|
24
|
+
*/
|
|
25
|
+
export declare function $generateDOMFromNodes<T extends HTMLElement | DocumentFragment>(container: T, selection?: null | BaseSelection, editor?: LexicalEditor): T;
|
|
26
|
+
/**
|
|
27
|
+
* Generate DOM nodes from a root node into the given container element,
|
|
28
|
+
* including the root node itself. Uses the editor's {@link EditorDOMRenderConfig}.
|
|
29
|
+
* @experimental
|
|
30
|
+
*/
|
|
31
|
+
export declare function $generateDOMFromRoot<T extends HTMLElement | DocumentFragment>(container: T, root?: LexicalNode): T;
|
|
15
32
|
export declare function $generateHtmlFromNodes(editor: LexicalEditor, selection?: BaseSelection | null): string;
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"html"
|
|
9
9
|
],
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"version": "0.
|
|
11
|
+
"version": "0.44.0",
|
|
12
12
|
"main": "LexicalHtml.js",
|
|
13
13
|
"types": "index.d.ts",
|
|
14
14
|
"repository": {
|
|
@@ -17,9 +17,10 @@
|
|
|
17
17
|
"directory": "packages/lexical-html"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@lexical/
|
|
21
|
-
"@lexical/
|
|
22
|
-
"lexical": "0.
|
|
20
|
+
"@lexical/extension": "0.44.0",
|
|
21
|
+
"@lexical/selection": "0.44.0",
|
|
22
|
+
"@lexical/utils": "0.44.0",
|
|
23
|
+
"lexical": "0.44.0"
|
|
23
24
|
},
|
|
24
25
|
"module": "LexicalHtml.mjs",
|
|
25
26
|
"sideEffects": false,
|