@mdxeditor/editor 0.16.0 → 0.17.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/dist/index.js +2 -1
- package/dist/plugins/headings/index.d.ts +344 -3
- package/dist/plugins/headings/index.js +22 -10
- package/dist/plugins/markdown-shortcut/index.d.ts +1 -1
- package/dist/plugins/markdown-shortcut/index.js +35 -3
- package/dist/plugins/toolbar/components/BlockTypeSelect.js +3 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { MDXEditor } from "./MDXEditor.js";
|
|
|
3
3
|
import { importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
|
|
4
4
|
import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
|
|
5
5
|
import { NESTED_EDITOR_UPDATED_COMMAND, corePlugin, corePluginHooks, coreSystem } from "./plugins/core/index.js";
|
|
6
|
-
import { headingsPlugin, headingsSystem } from "./plugins/headings/index.js";
|
|
6
|
+
import { headingsPlugin, headingsPluginHooks, headingsSystem } from "./plugins/headings/index.js";
|
|
7
7
|
import { thematicBreakPlugin, thematicBreakPluginHooks, thematicBreakSystem } from "./plugins/thematic-break/index.js";
|
|
8
8
|
import { listsPlugin, listsPluginHooks, listsSystem } from "./plugins/lists/index.js";
|
|
9
9
|
import { tablePlugin, tablePluginHooks, tableSystem } from "./plugins/table/index.js";
|
|
@@ -128,6 +128,7 @@ export {
|
|
|
128
128
|
frontmatterSystem,
|
|
129
129
|
getRealmFactory,
|
|
130
130
|
headingsPlugin,
|
|
131
|
+
headingsPluginHooks,
|
|
131
132
|
headingsSystem,
|
|
132
133
|
imagePlugin,
|
|
133
134
|
imagePluginHooks,
|
|
@@ -9,8 +9,10 @@ import type { InitialEditorStateType } from '@lexical/react/LexicalComposer';
|
|
|
9
9
|
import type { JsxComponentDescriptor } from '../jsx';
|
|
10
10
|
import type { HistoryState } from '@lexical/history';
|
|
11
11
|
import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode } from 'lexical';
|
|
12
|
-
import type { SystemSpec, Realm, RealmNode, PluginConstructor } from '../../gurx';
|
|
12
|
+
import type { SystemSpec, Realm, RealmNode, PluginConstructor, TypedRealm, ValueForKey, SystemKeys, ValuesForKeys, SystemDict } from '../../gurx';
|
|
13
13
|
/// <reference types="react" />
|
|
14
|
+
declare const ALL_HEADING_LEVELS: readonly [1, 2, 3, 4, 5, 6];
|
|
15
|
+
export type HEADING_LEVEL = (typeof ALL_HEADING_LEVELS)[number];
|
|
14
16
|
/**
|
|
15
17
|
* @internal
|
|
16
18
|
*/
|
|
@@ -116,7 +118,19 @@ export declare const headingsSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
|
|
|
116
118
|
applyBlockType: RealmNode<BlockType>;
|
|
117
119
|
convertSelectionToNode: RealmNode<() => ElementNode>;
|
|
118
120
|
insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
|
|
119
|
-
}]) => {
|
|
121
|
+
}]) => {
|
|
122
|
+
allowedHeadingLevels: RealmNode<readonly (1 | 2 | 4 | 3 | 5 | 6)[]>;
|
|
123
|
+
}>;
|
|
124
|
+
/**
|
|
125
|
+
* The parameters of the `headingsPlugin`.
|
|
126
|
+
*/
|
|
127
|
+
interface HeadingsPluginParams {
|
|
128
|
+
/**
|
|
129
|
+
* Allows you to limit the headings used in the editor. Affects the block type dropdown and the keyboard shortcuts.
|
|
130
|
+
* @default [1, 2, 3, 4, 5, 6]
|
|
131
|
+
*/
|
|
132
|
+
allowedHeadingLevels?: ReadonlyArray<HEADING_LEVEL>;
|
|
133
|
+
}
|
|
120
134
|
/**
|
|
121
135
|
* @internal
|
|
122
136
|
*/
|
|
@@ -222,4 +236,331 @@ export declare const headingsPlugin: PluginConstructor<SystemSpec<[SystemSpec<[]
|
|
|
222
236
|
applyBlockType: RealmNode<BlockType>;
|
|
223
237
|
convertSelectionToNode: RealmNode<() => ElementNode>;
|
|
224
238
|
insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
|
|
225
|
-
}]) => {
|
|
239
|
+
}]) => {
|
|
240
|
+
allowedHeadingLevels: RealmNode<readonly (1 | 2 | 4 | 3 | 5 | 6)[]>;
|
|
241
|
+
}>, HeadingsPluginParams>, headingsPluginHooks: {
|
|
242
|
+
useRealmContext: () => TypedRealm<{
|
|
243
|
+
allowedHeadingLevels: RealmNode<readonly (1 | 2 | 4 | 3 | 5 | 6)[]>;
|
|
244
|
+
} & {
|
|
245
|
+
activeEditor: RealmNode<LexicalEditor | null>;
|
|
246
|
+
inFocus: RealmNode<boolean>;
|
|
247
|
+
historyState: RealmNode<HistoryState>;
|
|
248
|
+
currentSelection: RealmNode<RangeSelection | null>;
|
|
249
|
+
jsxIsAvailable: RealmNode<boolean>;
|
|
250
|
+
jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
|
|
251
|
+
initialRootEditorState: RealmNode<InitialEditorStateType>;
|
|
252
|
+
rootEditor: RealmNode<LexicalEditor | null>;
|
|
253
|
+
createRootEditorSubscription: RealmNode<EditorSubscription>;
|
|
254
|
+
createActiveEditorSubscription: RealmNode<EditorSubscription>;
|
|
255
|
+
importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
|
|
256
|
+
syntaxExtensions: RealmNode<Extension[]>;
|
|
257
|
+
mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
|
|
258
|
+
usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
|
|
259
|
+
addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
|
|
260
|
+
addLexicalNode: RealmNode<Klass<LexicalNode>>;
|
|
261
|
+
addSyntaxExtension: RealmNode<Extension>;
|
|
262
|
+
addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
|
|
263
|
+
toMarkdownExtensions: RealmNode<Options[]>;
|
|
264
|
+
toMarkdownOptions: RealmNode<Options>;
|
|
265
|
+
addToMarkdownExtension: RealmNode<Options>;
|
|
266
|
+
addExportVisitor: RealmNode<LexicalVisitor>;
|
|
267
|
+
exportVisitors: RealmNode<LexicalVisitor[]>;
|
|
268
|
+
initialMarkdown: RealmNode<string>;
|
|
269
|
+
setMarkdown: RealmNode<string>;
|
|
270
|
+
markdown: RealmNode<string>;
|
|
271
|
+
editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
|
|
272
|
+
contentEditableClassName: RealmNode<string>;
|
|
273
|
+
placeholder: RealmNode<ReactNode>;
|
|
274
|
+
autoFocus: RealmNode<boolean>;
|
|
275
|
+
readOnly: RealmNode<boolean>;
|
|
276
|
+
composerChildren: RealmNode<ComponentType<{}>[]>;
|
|
277
|
+
addComposerChild: RealmNode<ComponentType<{}>>;
|
|
278
|
+
topAreaChildren: RealmNode<ComponentType<{}>[]>;
|
|
279
|
+
addTopAreaChild: RealmNode<ComponentType<{}>>;
|
|
280
|
+
nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
|
|
281
|
+
addNestedEditorChild: RealmNode<ComponentType<{}>>;
|
|
282
|
+
editorWrappers: RealmNode<ComponentType<{
|
|
283
|
+
children: ReactNode;
|
|
284
|
+
}>[]>;
|
|
285
|
+
addEditorWrapper: RealmNode<ComponentType<{
|
|
286
|
+
children: ReactNode;
|
|
287
|
+
}>>;
|
|
288
|
+
currentFormat: RealmNode<number>;
|
|
289
|
+
editorInFocus: RealmNode<EditorInFocus | null>;
|
|
290
|
+
applyFormat: RealmNode<TextFormatType>;
|
|
291
|
+
currentBlockType: RealmNode<BlockType>;
|
|
292
|
+
applyBlockType: RealmNode<BlockType>;
|
|
293
|
+
convertSelectionToNode: RealmNode<() => ElementNode>;
|
|
294
|
+
insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
|
|
295
|
+
}>;
|
|
296
|
+
useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "allowedHeadingLevels">(key: K, callback: (value: ValueForKey<{
|
|
297
|
+
allowedHeadingLevels: RealmNode<readonly (1 | 2 | 4 | 3 | 5 | 6)[]>;
|
|
298
|
+
} & {
|
|
299
|
+
activeEditor: RealmNode<LexicalEditor | null>;
|
|
300
|
+
inFocus: RealmNode<boolean>;
|
|
301
|
+
historyState: RealmNode<HistoryState>;
|
|
302
|
+
currentSelection: RealmNode<RangeSelection | null>;
|
|
303
|
+
jsxIsAvailable: RealmNode<boolean>;
|
|
304
|
+
jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
|
|
305
|
+
initialRootEditorState: RealmNode<InitialEditorStateType>;
|
|
306
|
+
rootEditor: RealmNode<LexicalEditor | null>;
|
|
307
|
+
createRootEditorSubscription: RealmNode<EditorSubscription>;
|
|
308
|
+
createActiveEditorSubscription: RealmNode<EditorSubscription>;
|
|
309
|
+
importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
|
|
310
|
+
syntaxExtensions: RealmNode<Extension[]>;
|
|
311
|
+
mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
|
|
312
|
+
usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
|
|
313
|
+
addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
|
|
314
|
+
addLexicalNode: RealmNode<Klass<LexicalNode>>;
|
|
315
|
+
addSyntaxExtension: RealmNode<Extension>;
|
|
316
|
+
addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
|
|
317
|
+
toMarkdownExtensions: RealmNode<Options[]>;
|
|
318
|
+
toMarkdownOptions: RealmNode<Options>;
|
|
319
|
+
addToMarkdownExtension: RealmNode<Options>;
|
|
320
|
+
addExportVisitor: RealmNode<LexicalVisitor>;
|
|
321
|
+
exportVisitors: RealmNode<LexicalVisitor[]>;
|
|
322
|
+
initialMarkdown: RealmNode<string>;
|
|
323
|
+
setMarkdown: RealmNode<string>;
|
|
324
|
+
markdown: RealmNode<string>;
|
|
325
|
+
editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
|
|
326
|
+
contentEditableClassName: RealmNode<string>;
|
|
327
|
+
placeholder: RealmNode<ReactNode>;
|
|
328
|
+
autoFocus: RealmNode<boolean>;
|
|
329
|
+
readOnly: RealmNode<boolean>;
|
|
330
|
+
composerChildren: RealmNode<ComponentType<{}>[]>;
|
|
331
|
+
addComposerChild: RealmNode<ComponentType<{}>>;
|
|
332
|
+
topAreaChildren: RealmNode<ComponentType<{}>[]>;
|
|
333
|
+
addTopAreaChild: RealmNode<ComponentType<{}>>;
|
|
334
|
+
nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
|
|
335
|
+
addNestedEditorChild: RealmNode<ComponentType<{}>>;
|
|
336
|
+
editorWrappers: RealmNode<ComponentType<{
|
|
337
|
+
children: ReactNode;
|
|
338
|
+
}>[]>;
|
|
339
|
+
addEditorWrapper: RealmNode<ComponentType<{
|
|
340
|
+
children: ReactNode;
|
|
341
|
+
}>>;
|
|
342
|
+
currentFormat: RealmNode<number>;
|
|
343
|
+
editorInFocus: RealmNode<EditorInFocus | null>;
|
|
344
|
+
applyFormat: RealmNode<TextFormatType>;
|
|
345
|
+
currentBlockType: RealmNode<BlockType>;
|
|
346
|
+
applyBlockType: RealmNode<BlockType>;
|
|
347
|
+
convertSelectionToNode: RealmNode<() => ElementNode>;
|
|
348
|
+
insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
|
|
349
|
+
}, K>) => void) => void;
|
|
350
|
+
useEmitterValues: <K_1 extends SystemKeys<{
|
|
351
|
+
allowedHeadingLevels: RealmNode<readonly (1 | 2 | 4 | 3 | 5 | 6)[]>;
|
|
352
|
+
} & {
|
|
353
|
+
activeEditor: RealmNode<LexicalEditor | null>;
|
|
354
|
+
inFocus: RealmNode<boolean>;
|
|
355
|
+
historyState: RealmNode<HistoryState>;
|
|
356
|
+
currentSelection: RealmNode<RangeSelection | null>;
|
|
357
|
+
jsxIsAvailable: RealmNode<boolean>;
|
|
358
|
+
jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
|
|
359
|
+
initialRootEditorState: RealmNode<InitialEditorStateType>;
|
|
360
|
+
rootEditor: RealmNode<LexicalEditor | null>;
|
|
361
|
+
createRootEditorSubscription: RealmNode<EditorSubscription>;
|
|
362
|
+
createActiveEditorSubscription: RealmNode<EditorSubscription>;
|
|
363
|
+
importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
|
|
364
|
+
syntaxExtensions: RealmNode<Extension[]>;
|
|
365
|
+
mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
|
|
366
|
+
usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
|
|
367
|
+
addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
|
|
368
|
+
addLexicalNode: RealmNode<Klass<LexicalNode>>;
|
|
369
|
+
addSyntaxExtension: RealmNode<Extension>;
|
|
370
|
+
addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
|
|
371
|
+
toMarkdownExtensions: RealmNode<Options[]>;
|
|
372
|
+
toMarkdownOptions: RealmNode<Options>;
|
|
373
|
+
addToMarkdownExtension: RealmNode<Options>;
|
|
374
|
+
addExportVisitor: RealmNode<LexicalVisitor>;
|
|
375
|
+
exportVisitors: RealmNode<LexicalVisitor[]>;
|
|
376
|
+
initialMarkdown: RealmNode<string>;
|
|
377
|
+
setMarkdown: RealmNode<string>;
|
|
378
|
+
markdown: RealmNode<string>;
|
|
379
|
+
editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
|
|
380
|
+
contentEditableClassName: RealmNode<string>;
|
|
381
|
+
placeholder: RealmNode<ReactNode>;
|
|
382
|
+
autoFocus: RealmNode<boolean>;
|
|
383
|
+
readOnly: RealmNode<boolean>;
|
|
384
|
+
composerChildren: RealmNode<ComponentType<{}>[]>;
|
|
385
|
+
addComposerChild: RealmNode<ComponentType<{}>>;
|
|
386
|
+
topAreaChildren: RealmNode<ComponentType<{}>[]>;
|
|
387
|
+
addTopAreaChild: RealmNode<ComponentType<{}>>;
|
|
388
|
+
nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
|
|
389
|
+
addNestedEditorChild: RealmNode<ComponentType<{}>>;
|
|
390
|
+
editorWrappers: RealmNode<ComponentType<{
|
|
391
|
+
children: ReactNode;
|
|
392
|
+
}>[]>;
|
|
393
|
+
addEditorWrapper: RealmNode<ComponentType<{
|
|
394
|
+
children: ReactNode;
|
|
395
|
+
}>>;
|
|
396
|
+
currentFormat: RealmNode<number>;
|
|
397
|
+
editorInFocus: RealmNode<EditorInFocus | null>;
|
|
398
|
+
applyFormat: RealmNode<TextFormatType>;
|
|
399
|
+
currentBlockType: RealmNode<BlockType>;
|
|
400
|
+
applyBlockType: RealmNode<BlockType>;
|
|
401
|
+
convertSelectionToNode: RealmNode<() => ElementNode>;
|
|
402
|
+
insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
|
|
403
|
+
}>>(...keys: K_1) => ValuesForKeys<{
|
|
404
|
+
allowedHeadingLevels: RealmNode<readonly (1 | 2 | 4 | 3 | 5 | 6)[]>;
|
|
405
|
+
} & {
|
|
406
|
+
activeEditor: RealmNode<LexicalEditor | null>;
|
|
407
|
+
inFocus: RealmNode<boolean>;
|
|
408
|
+
historyState: RealmNode<HistoryState>;
|
|
409
|
+
currentSelection: RealmNode<RangeSelection | null>;
|
|
410
|
+
jsxIsAvailable: RealmNode<boolean>;
|
|
411
|
+
jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
|
|
412
|
+
initialRootEditorState: RealmNode<InitialEditorStateType>;
|
|
413
|
+
rootEditor: RealmNode<LexicalEditor | null>;
|
|
414
|
+
createRootEditorSubscription: RealmNode<EditorSubscription>;
|
|
415
|
+
createActiveEditorSubscription: RealmNode<EditorSubscription>;
|
|
416
|
+
importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
|
|
417
|
+
syntaxExtensions: RealmNode<Extension[]>;
|
|
418
|
+
mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
|
|
419
|
+
usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
|
|
420
|
+
addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
|
|
421
|
+
addLexicalNode: RealmNode<Klass<LexicalNode>>;
|
|
422
|
+
addSyntaxExtension: RealmNode<Extension>;
|
|
423
|
+
addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
|
|
424
|
+
toMarkdownExtensions: RealmNode<Options[]>;
|
|
425
|
+
toMarkdownOptions: RealmNode<Options>;
|
|
426
|
+
addToMarkdownExtension: RealmNode<Options>;
|
|
427
|
+
addExportVisitor: RealmNode<LexicalVisitor>;
|
|
428
|
+
exportVisitors: RealmNode<LexicalVisitor[]>;
|
|
429
|
+
initialMarkdown: RealmNode<string>;
|
|
430
|
+
setMarkdown: RealmNode<string>;
|
|
431
|
+
markdown: RealmNode<string>;
|
|
432
|
+
editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
|
|
433
|
+
contentEditableClassName: RealmNode<string>;
|
|
434
|
+
placeholder: RealmNode<ReactNode>;
|
|
435
|
+
autoFocus: RealmNode<boolean>;
|
|
436
|
+
readOnly: RealmNode<boolean>;
|
|
437
|
+
composerChildren: RealmNode<ComponentType<{}>[]>;
|
|
438
|
+
addComposerChild: RealmNode<ComponentType<{}>>;
|
|
439
|
+
topAreaChildren: RealmNode<ComponentType<{}>[]>;
|
|
440
|
+
addTopAreaChild: RealmNode<ComponentType<{}>>;
|
|
441
|
+
nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
|
|
442
|
+
addNestedEditorChild: RealmNode<ComponentType<{}>>;
|
|
443
|
+
editorWrappers: RealmNode<ComponentType<{
|
|
444
|
+
children: ReactNode;
|
|
445
|
+
}>[]>;
|
|
446
|
+
addEditorWrapper: RealmNode<ComponentType<{
|
|
447
|
+
children: ReactNode;
|
|
448
|
+
}>>;
|
|
449
|
+
currentFormat: RealmNode<number>;
|
|
450
|
+
editorInFocus: RealmNode<EditorInFocus | null>;
|
|
451
|
+
applyFormat: RealmNode<TextFormatType>;
|
|
452
|
+
currentBlockType: RealmNode<BlockType>;
|
|
453
|
+
applyBlockType: RealmNode<BlockType>;
|
|
454
|
+
convertSelectionToNode: RealmNode<() => ElementNode>;
|
|
455
|
+
insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
|
|
456
|
+
}, K_1>;
|
|
457
|
+
usePubKeys: () => (values: SystemDict<{
|
|
458
|
+
allowedHeadingLevels: RealmNode<readonly (1 | 2 | 4 | 3 | 5 | 6)[]>;
|
|
459
|
+
} & {
|
|
460
|
+
activeEditor: RealmNode<LexicalEditor | null>;
|
|
461
|
+
inFocus: RealmNode<boolean>;
|
|
462
|
+
historyState: RealmNode<HistoryState>;
|
|
463
|
+
currentSelection: RealmNode<RangeSelection | null>;
|
|
464
|
+
jsxIsAvailable: RealmNode<boolean>;
|
|
465
|
+
jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
|
|
466
|
+
initialRootEditorState: RealmNode<InitialEditorStateType>;
|
|
467
|
+
rootEditor: RealmNode<LexicalEditor | null>;
|
|
468
|
+
createRootEditorSubscription: RealmNode<EditorSubscription>;
|
|
469
|
+
createActiveEditorSubscription: RealmNode<EditorSubscription>;
|
|
470
|
+
importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
|
|
471
|
+
syntaxExtensions: RealmNode<Extension[]>;
|
|
472
|
+
mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
|
|
473
|
+
usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
|
|
474
|
+
addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
|
|
475
|
+
addLexicalNode: RealmNode<Klass<LexicalNode>>;
|
|
476
|
+
addSyntaxExtension: RealmNode<Extension>;
|
|
477
|
+
addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
|
|
478
|
+
toMarkdownExtensions: RealmNode<Options[]>;
|
|
479
|
+
toMarkdownOptions: RealmNode<Options>;
|
|
480
|
+
addToMarkdownExtension: RealmNode<Options>;
|
|
481
|
+
addExportVisitor: RealmNode<LexicalVisitor>;
|
|
482
|
+
exportVisitors: RealmNode<LexicalVisitor[]>;
|
|
483
|
+
initialMarkdown: RealmNode<string>;
|
|
484
|
+
setMarkdown: RealmNode<string>;
|
|
485
|
+
markdown: RealmNode<string>;
|
|
486
|
+
editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
|
|
487
|
+
contentEditableClassName: RealmNode<string>;
|
|
488
|
+
placeholder: RealmNode<ReactNode>;
|
|
489
|
+
autoFocus: RealmNode<boolean>;
|
|
490
|
+
readOnly: RealmNode<boolean>;
|
|
491
|
+
composerChildren: RealmNode<ComponentType<{}>[]>;
|
|
492
|
+
addComposerChild: RealmNode<ComponentType<{}>>;
|
|
493
|
+
topAreaChildren: RealmNode<ComponentType<{}>[]>;
|
|
494
|
+
addTopAreaChild: RealmNode<ComponentType<{}>>;
|
|
495
|
+
nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
|
|
496
|
+
addNestedEditorChild: RealmNode<ComponentType<{}>>;
|
|
497
|
+
editorWrappers: RealmNode<ComponentType<{
|
|
498
|
+
children: ReactNode;
|
|
499
|
+
}>[]>;
|
|
500
|
+
addEditorWrapper: RealmNode<ComponentType<{
|
|
501
|
+
children: ReactNode;
|
|
502
|
+
}>>;
|
|
503
|
+
currentFormat: RealmNode<number>;
|
|
504
|
+
editorInFocus: RealmNode<EditorInFocus | null>;
|
|
505
|
+
applyFormat: RealmNode<TextFormatType>;
|
|
506
|
+
currentBlockType: RealmNode<BlockType>;
|
|
507
|
+
applyBlockType: RealmNode<BlockType>;
|
|
508
|
+
convertSelectionToNode: RealmNode<() => ElementNode>;
|
|
509
|
+
insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
|
|
510
|
+
}>) => void;
|
|
511
|
+
usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "allowedHeadingLevels">(key: K_2) => (value: ValueForKey<{
|
|
512
|
+
allowedHeadingLevels: RealmNode<readonly (1 | 2 | 4 | 3 | 5 | 6)[]>;
|
|
513
|
+
} & {
|
|
514
|
+
activeEditor: RealmNode<LexicalEditor | null>;
|
|
515
|
+
inFocus: RealmNode<boolean>;
|
|
516
|
+
historyState: RealmNode<HistoryState>;
|
|
517
|
+
currentSelection: RealmNode<RangeSelection | null>;
|
|
518
|
+
jsxIsAvailable: RealmNode<boolean>;
|
|
519
|
+
jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
|
|
520
|
+
initialRootEditorState: RealmNode<InitialEditorStateType>;
|
|
521
|
+
rootEditor: RealmNode<LexicalEditor | null>;
|
|
522
|
+
createRootEditorSubscription: RealmNode<EditorSubscription>;
|
|
523
|
+
createActiveEditorSubscription: RealmNode<EditorSubscription>;
|
|
524
|
+
importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
|
|
525
|
+
syntaxExtensions: RealmNode<Extension[]>;
|
|
526
|
+
mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
|
|
527
|
+
usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
|
|
528
|
+
addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
|
|
529
|
+
addLexicalNode: RealmNode<Klass<LexicalNode>>;
|
|
530
|
+
addSyntaxExtension: RealmNode<Extension>;
|
|
531
|
+
addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
|
|
532
|
+
toMarkdownExtensions: RealmNode<Options[]>;
|
|
533
|
+
toMarkdownOptions: RealmNode<Options>;
|
|
534
|
+
addToMarkdownExtension: RealmNode<Options>;
|
|
535
|
+
addExportVisitor: RealmNode<LexicalVisitor>;
|
|
536
|
+
exportVisitors: RealmNode<LexicalVisitor[]>;
|
|
537
|
+
initialMarkdown: RealmNode<string>;
|
|
538
|
+
setMarkdown: RealmNode<string>;
|
|
539
|
+
markdown: RealmNode<string>;
|
|
540
|
+
editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
|
|
541
|
+
contentEditableClassName: RealmNode<string>;
|
|
542
|
+
placeholder: RealmNode<ReactNode>;
|
|
543
|
+
autoFocus: RealmNode<boolean>;
|
|
544
|
+
readOnly: RealmNode<boolean>;
|
|
545
|
+
composerChildren: RealmNode<ComponentType<{}>[]>;
|
|
546
|
+
addComposerChild: RealmNode<ComponentType<{}>>;
|
|
547
|
+
topAreaChildren: RealmNode<ComponentType<{}>[]>;
|
|
548
|
+
addTopAreaChild: RealmNode<ComponentType<{}>>;
|
|
549
|
+
nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
|
|
550
|
+
addNestedEditorChild: RealmNode<ComponentType<{}>>;
|
|
551
|
+
editorWrappers: RealmNode<ComponentType<{
|
|
552
|
+
children: ReactNode;
|
|
553
|
+
}>[]>;
|
|
554
|
+
addEditorWrapper: RealmNode<ComponentType<{
|
|
555
|
+
children: ReactNode;
|
|
556
|
+
}>>;
|
|
557
|
+
currentFormat: RealmNode<number>;
|
|
558
|
+
editorInFocus: RealmNode<EditorInFocus | null>;
|
|
559
|
+
applyFormat: RealmNode<TextFormatType>;
|
|
560
|
+
currentBlockType: RealmNode<BlockType>;
|
|
561
|
+
applyBlockType: RealmNode<BlockType>;
|
|
562
|
+
convertSelectionToNode: RealmNode<() => ElementNode>;
|
|
563
|
+
insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
|
|
564
|
+
}, K_2>) => void;
|
|
565
|
+
};
|
|
566
|
+
export {};
|
|
@@ -7,16 +7,18 @@ import { controlOrMeta } from "../../utils/detectMac.js";
|
|
|
7
7
|
import { system } from "../../gurx/realmFactory.js";
|
|
8
8
|
import { realmPlugin } from "../../gurx/react.js";
|
|
9
9
|
const FORMATTING_KEYS = [48, 49, 50, 51, 52, 53, 54];
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
const ALL_HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
|
|
11
|
+
const CODE_TO_HEADING_LEVEL_MAP = {
|
|
12
|
+
49: 1,
|
|
13
|
+
50: 2,
|
|
14
|
+
51: 3,
|
|
15
|
+
52: 4,
|
|
16
|
+
53: 5,
|
|
17
|
+
54: 6
|
|
17
18
|
};
|
|
18
19
|
const headingsSystem = system(
|
|
19
20
|
(r, [{ createRootEditorSubscription, convertSelectionToNode }]) => {
|
|
21
|
+
const allowedHeadingLevels = r.node(ALL_HEADING_LEVELS);
|
|
20
22
|
r.pub(createRootEditorSubscription, (theRootEditor) => {
|
|
21
23
|
return theRootEditor.registerCommand(
|
|
22
24
|
KEY_DOWN_COMMAND,
|
|
@@ -28,7 +30,11 @@ const headingsSystem = system(
|
|
|
28
30
|
if (keyCode === 48) {
|
|
29
31
|
r.pub(convertSelectionToNode, () => $createParagraphNode());
|
|
30
32
|
} else {
|
|
31
|
-
|
|
33
|
+
const allowedHeadingLevelsValues = r.getValue(allowedHeadingLevels);
|
|
34
|
+
const requestedHeadingLevel = CODE_TO_HEADING_LEVEL_MAP[keyCode];
|
|
35
|
+
if (!allowedHeadingLevelsValues.includes(requestedHeadingLevel)) {
|
|
36
|
+
r.pub(convertSelectionToNode, () => $createHeadingNode(`h${requestedHeadingLevel}`));
|
|
37
|
+
}
|
|
32
38
|
}
|
|
33
39
|
});
|
|
34
40
|
return true;
|
|
@@ -38,13 +44,18 @@ const headingsSystem = system(
|
|
|
38
44
|
COMMAND_PRIORITY_LOW
|
|
39
45
|
);
|
|
40
46
|
});
|
|
41
|
-
return {
|
|
47
|
+
return {
|
|
48
|
+
allowedHeadingLevels
|
|
49
|
+
};
|
|
42
50
|
},
|
|
43
51
|
[coreSystem]
|
|
44
52
|
);
|
|
45
|
-
const [headingsPlugin] = realmPlugin({
|
|
53
|
+
const [headingsPlugin, headingsPluginHooks] = realmPlugin({
|
|
46
54
|
id: "headings",
|
|
47
55
|
systemSpec: headingsSystem,
|
|
56
|
+
applyParamsToSystem(realm, params) {
|
|
57
|
+
realm.pubKey("allowedHeadingLevels", (params == null ? void 0 : params.allowedHeadingLevels) ?? ALL_HEADING_LEVELS);
|
|
58
|
+
},
|
|
48
59
|
init: (realm) => {
|
|
49
60
|
realm.pubKey("addImportVisitor", MdastHeadingVisitor);
|
|
50
61
|
realm.pubKey("addLexicalNode", HeadingNode);
|
|
@@ -53,5 +64,6 @@ const [headingsPlugin] = realmPlugin({
|
|
|
53
64
|
});
|
|
54
65
|
export {
|
|
55
66
|
headingsPlugin,
|
|
67
|
+
headingsPluginHooks,
|
|
56
68
|
headingsSystem
|
|
57
69
|
};
|
|
@@ -7,9 +7,9 @@ import type { EditorSubscription, EditorInFocus, BlockType } from '../core';
|
|
|
7
7
|
import type { InitialEditorStateType } from '@lexical/react/LexicalComposer';
|
|
8
8
|
import type { JsxComponentDescriptor } from '../jsx';
|
|
9
9
|
import type { HistoryState } from '@lexical/history';
|
|
10
|
-
import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode } from 'lexical';
|
|
11
10
|
import type { PluginConstructor, SystemSpec, Realm, RealmNode } from '../../gurx';
|
|
12
11
|
import React from 'react';
|
|
12
|
+
import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, DecoratorNode, ElementNode } from 'lexical';
|
|
13
13
|
/** @internal */
|
|
14
14
|
export declare const markdownShortcutPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
|
|
15
15
|
activeEditor: RealmNode<LexicalEditor | null>;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { QUOTE, LINK, ORDERED_LIST, UNORDERED_LIST, CODE, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE } from "@lexical/markdown";
|
|
2
2
|
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin.js";
|
|
3
3
|
import React__default from "react";
|
|
4
4
|
import { CodeBlockNode, $createCodeBlockNode } from "../codeblock/CodeBlockNode.js";
|
|
5
5
|
import { coreSystem } from "../core/index.js";
|
|
6
|
+
import { HeadingNode, $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
|
|
6
7
|
import { realmPlugin } from "../../gurx/react.js";
|
|
7
8
|
import { system } from "../../gurx/realmFactory.js";
|
|
8
9
|
const [markdownShortcutPlugin] = realmPlugin({
|
|
@@ -10,12 +11,24 @@ const [markdownShortcutPlugin] = realmPlugin({
|
|
|
10
11
|
dependencies: [],
|
|
11
12
|
systemSpec: system((_) => ({}), [coreSystem]),
|
|
12
13
|
init: (realm, _, pluginIds) => {
|
|
13
|
-
const
|
|
14
|
+
const allowedHeadingLevels = pluginIds.includes("headings") ? (
|
|
15
|
+
// @ts-expect-error we query the realm for the allowed heading levels
|
|
16
|
+
realm.getKeyValue("allowedHeadingLevels")
|
|
17
|
+
) : [];
|
|
18
|
+
const transformers = pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels);
|
|
14
19
|
realm.pubKey("addComposerChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }));
|
|
15
20
|
realm.pubKey("addNestedEditorChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }));
|
|
16
21
|
}
|
|
17
22
|
});
|
|
18
|
-
|
|
23
|
+
const createBlockNode = (createNode) => {
|
|
24
|
+
return (parentNode, children, match) => {
|
|
25
|
+
const node = createNode(match);
|
|
26
|
+
node.append(...children);
|
|
27
|
+
parentNode.replace(node);
|
|
28
|
+
node.select(0, 0);
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
function pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels) {
|
|
19
32
|
const transformers = [
|
|
20
33
|
BOLD_ITALIC_STAR,
|
|
21
34
|
BOLD_ITALIC_UNDERSCORE,
|
|
@@ -28,6 +41,25 @@ function pickTransformersForActivePlugins(pluginIds) {
|
|
|
28
41
|
// STRIKETHROUGH
|
|
29
42
|
];
|
|
30
43
|
if (pluginIds.includes("headings")) {
|
|
44
|
+
const minHeadingLevel = Math.min(...allowedHeadingLevels);
|
|
45
|
+
const maxHeadingLevel = Math.max(...allowedHeadingLevels);
|
|
46
|
+
const headingRegExp = new RegExp(`^(#{${minHeadingLevel},${maxHeadingLevel}})\\s`);
|
|
47
|
+
const HEADING = {
|
|
48
|
+
dependencies: [HeadingNode],
|
|
49
|
+
export: (node, exportChildren) => {
|
|
50
|
+
if (!$isHeadingNode(node)) {
|
|
51
|
+
return null;
|
|
52
|
+
}
|
|
53
|
+
const level = Number(node.getTag().slice(1));
|
|
54
|
+
return "#".repeat(level) + " " + exportChildren(node);
|
|
55
|
+
},
|
|
56
|
+
regExp: headingRegExp,
|
|
57
|
+
replace: createBlockNode((match) => {
|
|
58
|
+
const tag = `h${match[1].length}`;
|
|
59
|
+
return $createHeadingNode(tag);
|
|
60
|
+
}),
|
|
61
|
+
type: "element"
|
|
62
|
+
};
|
|
31
63
|
transformers.push(HEADING);
|
|
32
64
|
}
|
|
33
65
|
if (pluginIds.includes("quote")) {
|
|
@@ -3,6 +3,7 @@ import { $createParagraphNode } from "lexical";
|
|
|
3
3
|
import React__default from "react";
|
|
4
4
|
import { corePluginHooks } from "../../core/index.js";
|
|
5
5
|
import { Select } from "../primitives/select.js";
|
|
6
|
+
import { headingsPluginHooks } from "../../headings/index.js";
|
|
6
7
|
import { useHasPlugin } from "../../../gurx/react.js";
|
|
7
8
|
const BlockTypeSelect = () => {
|
|
8
9
|
const convertSelectionToNode = corePluginHooks.usePublisher("convertSelectionToNode");
|
|
@@ -17,7 +18,8 @@ const BlockTypeSelect = () => {
|
|
|
17
18
|
items.push({ label: "Quote", value: "quote" });
|
|
18
19
|
}
|
|
19
20
|
if (hasHeadings) {
|
|
20
|
-
|
|
21
|
+
const [allowedHeadingLevels] = headingsPluginHooks.useEmitterValues("allowedHeadingLevels");
|
|
22
|
+
items.push(...allowedHeadingLevels.map((n) => ({ label: `Heading ${n}`, value: `h${n}` })));
|
|
21
23
|
}
|
|
22
24
|
return /* @__PURE__ */ React__default.createElement(
|
|
23
25
|
Select,
|