@mdxeditor/editor 3.0.8 → 3.1.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.
Files changed (60) hide show
  1. package/dist/FormatConstants.js +6 -0
  2. package/dist/MDXEditor.js +1 -1
  3. package/dist/directive-editors/GenericDirectiveEditor.js +5 -7
  4. package/dist/exportMarkdownFromLexical.js +10 -7
  5. package/dist/icons/strikethrough_s.svg.js +5 -0
  6. package/dist/icons/subscript.svg.js +5 -0
  7. package/dist/icons/superscript.svg.js +5 -0
  8. package/dist/importMarkdownToLexical.js +3 -1
  9. package/dist/index.d.ts +42 -24
  10. package/dist/index.js +2 -1
  11. package/dist/jsx-editors/GenericJsxEditor.js +1 -1
  12. package/dist/mdastUtilHtmlComment.js +2 -2
  13. package/dist/node_modules/micromark-extension-gfm-strikethrough/lib/syntax.js +114 -0
  14. package/dist/node_modules/micromark-util-chunked/index.js +29 -0
  15. package/dist/node_modules/micromark-util-classify-character/index.js +12 -0
  16. package/dist/node_modules/micromark-util-resolve-all/index.js +15 -0
  17. package/dist/plugins/codeblock/index.js +2 -2
  18. package/dist/plugins/codemirror/index.js +4 -4
  19. package/dist/plugins/core/Icon.js +6 -0
  20. package/dist/plugins/core/LexicalTextVisitor.js +49 -4
  21. package/dist/plugins/core/MdastFormattingVisitor.js +35 -59
  22. package/dist/plugins/core/MdastHTMLNode.js +1 -2
  23. package/dist/plugins/core/NestedLexicalEditor.js +1 -1
  24. package/dist/plugins/core/PropertyPopover.js +28 -18
  25. package/dist/plugins/core/index.js +34 -29
  26. package/dist/plugins/core/ui/DownshiftAutoComplete.js +1 -1
  27. package/dist/plugins/directives/index.js +2 -2
  28. package/dist/plugins/frontmatter/FrontmatterEditor.js +48 -31
  29. package/dist/plugins/frontmatter/FrontmatterNode.js +5 -3
  30. package/dist/plugins/image/ImageDialog.js +1 -1
  31. package/dist/plugins/image/ImageEditor.js +8 -6
  32. package/dist/plugins/image/ImageNode.js +2 -2
  33. package/dist/plugins/image/MdastImageVisitor.js +3 -3
  34. package/dist/plugins/image/index.js +20 -20
  35. package/dist/plugins/jsx/index.js +1 -1
  36. package/dist/plugins/link-dialog/LinkDialog.js +13 -5
  37. package/dist/plugins/link-dialog/index.js +7 -8
  38. package/dist/plugins/lists/MdastListVisitor.js +1 -2
  39. package/dist/plugins/lists/index.js +1 -1
  40. package/dist/plugins/markdown-shortcut/index.js +4 -2
  41. package/dist/plugins/sandpack/SandpackEditor.js +1 -1
  42. package/dist/plugins/sandpack/index.js +2 -2
  43. package/dist/plugins/sandpack/useCodeMirrorRef.js +8 -8
  44. package/dist/plugins/table/TableEditor.js +67 -50
  45. package/dist/plugins/table/TableNode.js +2 -2
  46. package/dist/plugins/toolbar/components/BlockTypeSelect.js +3 -3
  47. package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.js +79 -24
  48. package/dist/plugins/toolbar/components/ChangeAdmonitionType.js +1 -1
  49. package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js +1 -1
  50. package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.js +3 -1
  51. package/dist/plugins/toolbar/components/InsertFrontmatter.js +3 -1
  52. package/dist/plugins/toolbar/components/InsertImage.js +12 -1
  53. package/dist/plugins/toolbar/components/InsertThematicBreak.js +10 -1
  54. package/dist/plugins/toolbar/components/KitchenSinkToolbar.js +2 -2
  55. package/dist/plugins/toolbar/primitives/DialogButton.js +1 -1
  56. package/dist/plugins/toolbar/primitives/select.js +3 -1
  57. package/dist/plugins/toolbar/primitives/toolbar.js +17 -3
  58. package/dist/utils/detectMac.js +1 -1
  59. package/dist/utils/isPartOftheEditorUI.js +1 -1
  60. package/package.json +3 -2
@@ -1,10 +1,16 @@
1
1
  const IS_BOLD = 1;
2
2
  const IS_ITALIC = 2;
3
+ const IS_STRIKETHROUGH = 4;
3
4
  const IS_UNDERLINE = 8;
4
5
  const IS_CODE = 16;
6
+ const IS_SUBSCRIPT = 32;
7
+ const IS_SUPERSCRIPT = 64;
5
8
  export {
6
9
  IS_BOLD,
7
10
  IS_CODE,
8
11
  IS_ITALIC,
12
+ IS_STRIKETHROUGH,
13
+ IS_SUBSCRIPT,
14
+ IS_SUPERSCRIPT,
9
15
  IS_UNDERLINE
10
16
  };
package/dist/MDXEditor.js CHANGED
@@ -125,7 +125,7 @@ const MDXEditor = React__default.forwardRef((props, ref) => {
125
125
  onError: props.onError ?? noop,
126
126
  translation: props.translation ?? defaultTranslation
127
127
  }),
128
- ...props.plugins || []
128
+ ...props.plugins ?? []
129
129
  ]
130
130
  },
131
131
  /* @__PURE__ */ React__default.createElement(EditorRootElement, { className: props.className }, /* @__PURE__ */ React__default.createElement(LexicalProvider, null, /* @__PURE__ */ React__default.createElement(RichTextEditor, null))),
@@ -5,13 +5,11 @@ import styles from "../styles/ui.module.css.js";
5
5
  const GenericDirectiveEditor = ({ mdastNode, descriptor }) => {
6
6
  const updateMdastNode = useMdastNodeUpdater();
7
7
  const properties = React__default.useMemo(() => {
8
- return descriptor.attributes.reduce(
9
- (acc, attributeName) => {
10
- acc[attributeName] = (mdastNode.attributes || {})[attributeName] || "";
11
- return acc;
12
- },
13
- {}
14
- );
8
+ return descriptor.attributes.reduce((acc, attributeName) => {
9
+ var _a;
10
+ acc[attributeName] = ((_a = mdastNode.attributes) == null ? void 0 : _a[attributeName]) ?? "";
11
+ return acc;
12
+ }, {});
15
13
  }, [mdastNode, descriptor]);
16
14
  const onChange = React__default.useCallback(
17
15
  (values) => {
@@ -136,14 +136,13 @@ function exportLexicalTreeToMdast({
136
136
  return typedRoot;
137
137
  }
138
138
  function collapseNestedHtmlTags(node) {
139
- if ("children" in node && node.children) {
139
+ if ("children" in node && node.children.length > 0) {
140
140
  if (isMdastHTMLNode(node) && node.children.length === 1) {
141
141
  const onlyChild = node.children[0];
142
142
  if (onlyChild.type === "mdxJsxTextElement" && onlyChild.name === "span") {
143
- (onlyChild.attributes || []).forEach((attribute) => {
144
- var _a;
143
+ onlyChild.attributes.forEach((attribute) => {
145
144
  if (attribute.type === "mdxJsxAttribute") {
146
- const parentAttribute = (_a = node.attributes) == null ? void 0 : _a.find((attr) => attr.type === "mdxJsxAttribute" && attr.name === attribute.name);
145
+ const parentAttribute = node.attributes.find((attr) => attr.type === "mdxJsxAttribute" && attr.name === attribute.name);
147
146
  if (parentAttribute) {
148
147
  if (attribute.name === "className") {
149
148
  const mergedClassesSet = /* @__PURE__ */ new Set([
@@ -162,7 +161,9 @@ function collapseNestedHtmlTags(node) {
162
161
  node.children = onlyChild.children;
163
162
  }
164
163
  }
165
- node.children.forEach((child) => collapseNestedHtmlTags(child));
164
+ node.children.forEach((child) => {
165
+ collapseNestedHtmlTags(child);
166
+ });
166
167
  }
167
168
  }
168
169
  function convertUnderlineJsxToHtml(node) {
@@ -215,9 +216,11 @@ function fixWrappingWhitespace(node, parentChain) {
215
216
  }
216
217
  }
217
218
  }
218
- if ("children" in node && node.children) {
219
+ if ("children" in node && node.children.length > 0) {
219
220
  const nodeAsParent = node;
220
- nodeAsParent.children.forEach((child) => fixWrappingWhitespace(child, [...parentChain, nodeAsParent]));
221
+ nodeAsParent.children.forEach((child) => {
222
+ fixWrappingWhitespace(child, [...parentChain, nodeAsParent]);
223
+ });
221
224
  }
222
225
  }
223
226
  function exportMarkdownFromLexical({
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ const SvgStrikethroughS = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12.15 20C10.8833 20 9.75833 19.625 8.775 18.875C7.79167 18.125 7.08333 17.1 6.65 15.8L8.85 14.85C9.08333 15.65 9.4875 16.3083 10.0625 16.825C10.6375 17.3416 11.35 17.6 12.2 17.6C12.9 17.6 13.5333 17.4333 14.1 17.1C14.6667 16.7666 14.95 16.2333 14.95 15.5C14.95 15.2 14.8917 14.925 14.775 14.675C14.6583 14.425 14.5 14.2 14.3 14H17.1C17.1833 14.2333 17.2458 14.4708 17.2875 14.7125C17.3292 14.9541 17.35 15.2166 17.35 15.5C17.35 16.9333 16.8375 18.0416 15.8125 18.825C14.7875 19.6083 13.5667 20 12.15 20ZM2 12V9.99998H22V12H2ZM12.05 3.84998C13.15 3.84998 14.1125 4.12081 14.9375 4.66248C15.7625 5.20414 16.4 6.03331 16.85 7.14998L14.65 8.12498C14.5 7.64164 14.2208 7.20831 13.8125 6.82498C13.4042 6.44164 12.8333 6.24998 12.1 6.24998C11.4167 6.24998 10.85 6.40414 10.4 6.71248C9.95 7.02081 9.7 7.44998 9.65 7.99998H7.25C7.28333 6.84998 7.7375 5.87081 8.6125 5.06248C9.4875 4.25414 10.6333 3.84998 12.05 3.84998Z", fill: "currentColor" }));
3
+ export {
4
+ SvgStrikethroughS as default
5
+ };
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ const SvgSubscript = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19 21V18H22V17H19V16H23V19H20V20H23V21H19ZM5.875 19L10.5 11.725L6.2 5H8.85L11.95 10H12.05L15.125 5H17.8L13.475 11.725L18.125 19H15.45L12.05 13.575H11.95L8.55 19H5.875Z", fill: "currentColor" }));
3
+ export {
4
+ SvgSubscript as default
5
+ };
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ const SvgSuperscript = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19 8V5H22V4H19V3H23V6H20V7H23V8H19ZM5.875 19L10.5 11.725L6.2 5H8.85L11.95 10H12.05L15.125 5H17.8L13.475 11.725L18.125 19H15.45L12.05 13.575H11.95L8.55 19H5.875Z", fill: "currentColor" }));
3
+ export {
4
+ SvgSuperscript as default
5
+ };
@@ -53,7 +53,9 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors })
53
53
  if (!isParent(mdastNode)) {
54
54
  throw new Error("Attempting to visit children of a non-parent");
55
55
  }
56
- mdastNode.children.forEach((child) => visit(child, lexicalParent, mdastNode));
56
+ mdastNode.children.forEach((child) => {
57
+ visit(child, lexicalParent, mdastNode);
58
+ });
57
59
  }
58
60
  function visit(mdastNode, lexicalParent, mdastParent) {
59
61
  const visitor = visitors.find((visitor2) => {
package/dist/index.d.ts CHANGED
@@ -594,7 +594,7 @@ export declare const ConditionalContents: default_2.FC<{
594
594
  * An object that describes a possible option to be displayed in the {@link ConditionalContents} component.
595
595
  * @group Toolbar Primitives
596
596
  */
597
- export declare type ConditionalContentsOption = {
597
+ export declare interface ConditionalContentsOption {
598
598
  /**
599
599
  * A function that returns `true` if the option should be displayed for the current editor in focus.
600
600
  */
@@ -603,7 +603,7 @@ export declare type ConditionalContentsOption = {
603
603
  * The contents to display if the `when` function returns `true`.
604
604
  */
605
605
  contents: () => default_2.ReactNode;
606
- };
606
+ }
607
607
 
608
608
  /**
609
609
  * Holds the CSS class name of the content editable element.
@@ -705,7 +705,7 @@ export declare const currentBlockType$: NodeRef<BlockType>;
705
705
  * Holds the current format of the selection.
706
706
  * @group Core
707
707
  */
708
- export declare const currentFormat$: NodeRef<number>;
708
+ export declare const currentFormat$: NodeRef<FORMAT>;
709
709
 
710
710
  /**
711
711
  * The current list type in the editor.
@@ -731,6 +731,8 @@ export declare function curry1to0<T, R>(proc: (arg: T) => R, arg: T): () => R;
731
731
  */
732
732
  export declare function curry2to1<T, K, R>(proc: (arg1: T, arg2: K) => R, arg1: T): (arg2: K) => R;
733
733
 
734
+ declare const DEFAULT_FORMAT: 0;
735
+
734
736
  /**
735
737
  * Contains the default language to use when creating a new code block if no language is passed.
736
738
  * @group Code Block
@@ -866,7 +868,7 @@ export declare interface DirectiveDescriptor<T extends Directives = Directives>
866
868
  * Contains the currently registered Markdown directive descriptors.
867
869
  * @group Directive
868
870
  */
869
- export declare const directiveDescriptors$: NodeRef<DirectiveDescriptor<Directives>[]>;
871
+ export declare const directiveDescriptors$: NodeRef<DirectiveDescriptor< Directives>[]>;
870
872
 
871
873
  /**
872
874
  * The properties passed to the {@link DirectiveDescriptor.Editor} component.
@@ -954,11 +956,11 @@ export declare const disableImageSettingsButton$: NodeRef<boolean>;
954
956
  * The state of the image dialog when it is in editing an existing node.
955
957
  * @group Image
956
958
  */
957
- export declare type EditingImageDialogState = {
959
+ export declare interface EditingImageDialogState {
958
960
  type: 'editing';
959
961
  nodeKey: string;
960
962
  initialValues: Omit<SaveImageParameters, 'file'>;
961
- };
963
+ }
962
964
 
963
965
  /**
964
966
  * The state of the link dialog when it is in edit mode.
@@ -1013,26 +1015,28 @@ export declare type EditorSubscription = (activeEditor: LexicalEditor) => () =>
1013
1015
 
1014
1016
  /* Excluded from this release type: exportVisitors$ */
1015
1017
 
1016
- declare type ExpressionValue = {
1018
+ declare interface ExpressionValue {
1017
1019
  type: 'expression';
1018
1020
  value: string;
1019
- };
1021
+ }
1020
1022
 
1021
1023
  /**
1022
1024
  * A default option to be displayed in the {@link ConditionalContents} component if none of the other options match.
1023
1025
  * @group Toolbar Primitives
1024
1026
  */
1025
- export declare type FallbackOption = {
1027
+ export declare interface FallbackOption {
1026
1028
  /**
1027
1029
  * The contents to display
1028
1030
  */
1029
1031
  fallback: () => default_2.ReactNode;
1030
- };
1032
+ }
1031
1033
 
1032
1034
  declare interface FileImageParameters extends BaseImageParameters {
1033
1035
  file: File;
1034
1036
  }
1035
1037
 
1038
+ declare type FORMAT = typeof DEFAULT_FORMAT | typeof IS_BOLD | typeof IS_ITALIC | typeof IS_STRIKETHROUGH | typeof IS_UNDERLINE | typeof IS_CODE | typeof IS_SUBSCRIPT | typeof IS_SUPERSCRIPT | typeof IS_HIGHLIGHT;
1039
+
1036
1040
  /**
1037
1041
  * Fetches a value from the Lexical editor read cycle.
1038
1042
  * @group Utils
@@ -1157,7 +1161,7 @@ export declare const iconComponentFor$: NodeRef<(name: IconKey) => default_2.Rea
1157
1161
  * A type that represents the possible icon names that can be used with the {@link iconComponentFor$} cell.
1158
1162
  * @group Core
1159
1163
  */
1160
- export declare type IconKey = 'add_column' | 'add_photo' | 'add_row' | 'arrow_drop_down' | 'check' | 'check_small' | 'close' | 'code' | 'content_copy' | 'delete_big' | 'delete_small' | 'sandpack' | 'difference' | 'edit' | 'admonition' | 'extension' | 'format_align_center' | 'format_align_left' | 'format_align_right' | 'format_bold' | 'format_italic' | 'format_list_bulleted' | 'format_list_checked' | 'format_list_numbered' | 'format_underlined' | 'frame_source' | 'frontmatter' | 'horizontal_rule' | 'insert_col_left' | 'insert_col_right' | 'insert_row_above' | 'insert_row_below' | 'link' | 'link_off' | 'markdown' | 'more_horiz' | 'more_vert' | 'open_in_new' | 'redo' | 'rich_text' | 'settings' | 'table' | 'undo';
1164
+ export declare type IconKey = 'add_column' | 'add_photo' | 'add_row' | 'arrow_drop_down' | 'check' | 'check_small' | 'close' | 'code' | 'content_copy' | 'delete_big' | 'delete_small' | 'sandpack' | 'difference' | 'edit' | 'admonition' | 'extension' | 'format_align_center' | 'format_align_left' | 'format_align_right' | 'format_bold' | 'format_italic' | 'format_list_bulleted' | 'format_list_checked' | 'format_list_numbered' | 'format_underlined' | 'frame_source' | 'frontmatter' | 'horizontal_rule' | 'insert_col_left' | 'insert_col_right' | 'insert_row_above' | 'insert_row_below' | 'link' | 'link_off' | 'markdown' | 'more_horiz' | 'more_vert' | 'open_in_new' | 'redo' | 'rich_text' | 'settings' | 'strikeThrough' | 'subscript' | 'superscript' | 'table' | 'undo';
1161
1165
 
1162
1166
  /**
1163
1167
  * Holds the autocomplete suggestions for image sources.
@@ -1260,9 +1264,9 @@ export declare interface ImportPoint {
1260
1264
  * The state of the image dialog when it is inactive.
1261
1265
  * @group Image
1262
1266
  */
1263
- export declare type InactiveImageDialogState = {
1267
+ export declare interface InactiveImageDialogState {
1264
1268
  type: 'inactive';
1265
- };
1269
+ }
1266
1270
 
1267
1271
  /**
1268
1272
  * The state of the link dialog when it is inactive.
@@ -1453,8 +1457,16 @@ declare const IS_BOLD: 1;
1453
1457
 
1454
1458
  declare const IS_CODE: 16;
1455
1459
 
1460
+ declare const IS_HIGHLIGHT: 128;
1461
+
1456
1462
  declare const IS_ITALIC: 2;
1457
1463
 
1464
+ declare const IS_STRIKETHROUGH: 4;
1465
+
1466
+ declare const IS_SUBSCRIPT: 32;
1467
+
1468
+ declare const IS_SUPERSCRIPT: 64;
1469
+
1458
1470
  declare const IS_UNDERLINE: 8;
1459
1471
 
1460
1472
  /**
@@ -1476,7 +1488,7 @@ export declare function isMdastJsxNode(node: Mdast.Nodes): node is MdastJsx;
1476
1488
  * joinProc does not pass arguments or collect return values.
1477
1489
  * @group Utils
1478
1490
  */
1479
- export declare function joinProc(...procs: Array<() => unknown>): () => void;
1491
+ export declare function joinProc(...procs: (() => unknown)[]): () => void;
1480
1492
 
1481
1493
  /**
1482
1494
  * Defines the structure of a JSX component that can be used within the markdown document.
@@ -1544,7 +1556,7 @@ export declare const jsxIsAvailable$: NodeRef<boolean>;
1544
1556
  */
1545
1557
  export declare const jsxPlugin: (params?: JsxPluginParams | undefined) => RealmPlugin;
1546
1558
 
1547
- declare type JsxPluginParams = {
1559
+ declare interface JsxPluginParams {
1548
1560
  /**
1549
1561
  * A set of descriptors that document the JSX elements used in the document.
1550
1562
  */
@@ -1553,7 +1565,7 @@ declare type JsxPluginParams = {
1553
1565
  * Wether or not to allow default React fragments <></> processing in MDX.
1554
1566
  */
1555
1567
  allowFragment?: boolean;
1556
- };
1568
+ }
1557
1569
 
1558
1570
  declare type JsxProperties = Record<string, string | ExpressionValue>;
1559
1571
 
@@ -1740,7 +1752,7 @@ export declare const listsPlugin: (params?: unknown) => RealmPlugin;
1740
1752
  * @param options - The list types that the user can toggle between. Defaults to `['bullet', 'number', 'check']`.
1741
1753
  */
1742
1754
  export declare const ListsToggle: default_2.FC<{
1743
- options?: Array<'bullet' | 'number' | 'check'>;
1755
+ options?: ('bullet' | 'number' | 'check')[];
1744
1756
  }>;
1745
1757
 
1746
1758
  /* Excluded from this release type: makeHslTransparent */
@@ -1852,12 +1864,12 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
1852
1864
  * Adds formatting as a context for the current node and its children.
1853
1865
  * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
1854
1866
  */
1855
- addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Parent | null): void;
1867
+ addFormatting(format: FORMAT, node?: Mdast.Parent | null): void;
1856
1868
  /**
1857
1869
  * Removes formatting as a context for the current node and its children.
1858
1870
  * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
1859
1871
  */
1860
- removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Parent | null): void;
1872
+ removeFormatting(format: FORMAT, node?: Mdast.Parent | null): void;
1861
1873
  /**
1862
1874
  * Access the current formatting context.
1863
1875
  */
@@ -2107,9 +2119,9 @@ export declare const NestedLexicalEditor: <T extends Mdast.RootContent>(props: {
2107
2119
  * The state of the image dialog when it is in new mode.
2108
2120
  * @group Image
2109
2121
  */
2110
- export declare type NewImageDialogState = {
2122
+ export declare interface NewImageDialogState {
2111
2123
  type: 'new';
2112
- };
2124
+ }
2113
2125
 
2114
2126
  /**
2115
2127
  * an empty function
@@ -2463,7 +2475,7 @@ export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChan
2463
2475
  value: T;
2464
2476
  contents: default_2.ReactNode;
2465
2477
  }[];
2466
- onChange: (value: T) => void;
2478
+ onChange: (value: T | '') => void;
2467
2479
  value: T;
2468
2480
  className?: string;
2469
2481
  }) => default_2.JSX.Element;
@@ -2474,6 +2486,12 @@ declare interface SrcImageParameters extends BaseImageParameters {
2474
2486
  src: string;
2475
2487
  }
2476
2488
 
2489
+ /**
2490
+ * A toolbar component that lets the user toggle strikeThrough, superscript and subscript formatting.
2491
+ * @group Toolbar Components
2492
+ */
2493
+ export declare const StrikeThroughSupSubToggles: default_2.FC;
2494
+
2477
2495
  /**
2478
2496
  * An action that switches the link dialog from preview mode to edit mode.
2479
2497
  * @group Link Dialog
@@ -2668,12 +2686,12 @@ export declare type ViewMode = 'rich-text' | 'source' | 'diff';
2668
2686
  * The construct is used so that the lexical nodes can focus their React component editors.
2669
2687
  * @group Utils
2670
2688
  */
2671
- export declare type VoidEmitter = {
2689
+ export declare interface VoidEmitter {
2672
2690
  /**
2673
2691
  * Subscribes to the emitter event
2674
2692
  */
2675
2693
  subscribe: (cb: () => void) => void;
2676
- };
2694
+ }
2677
2695
 
2678
2696
  /**
2679
2697
  * Creates a void emitter.
package/dist/index.js CHANGED
@@ -27,7 +27,7 @@ import { toolbarContents$, toolbarPlugin } from "./plugins/toolbar/index.js";
27
27
  import { cmExtensions$, diffMarkdown$, diffSourcePlugin, readOnlyDiff$ } from "./plugins/diff-source/index.js";
28
28
  import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
29
29
  import { BlockTypeSelect } from "./plugins/toolbar/components/BlockTypeSelect.js";
30
- import { BoldItalicUnderlineToggles } from "./plugins/toolbar/components/BoldItalicUnderlineToggles.js";
30
+ import { BoldItalicUnderlineToggles, StrikeThroughSupSubToggles } from "./plugins/toolbar/components/BoldItalicUnderlineToggles.js";
31
31
  import { ChangeAdmonitionType, admonitionLabelsMap } from "./plugins/toolbar/components/ChangeAdmonitionType.js";
32
32
  import { ChangeCodeMirrorLanguage } from "./plugins/toolbar/components/ChangeCodeMirrorLanguage.js";
33
33
  import { CodeToggle } from "./plugins/toolbar/components/CodeToggle.js";
@@ -129,6 +129,7 @@ export {
129
129
  ShowSandpackInfo,
130
130
  SingleChoiceToggleGroup,
131
131
  SingleToggleGroup,
132
+ StrikeThroughSupSubToggles,
132
133
  TYPE_NAME,
133
134
  TableNode,
134
135
  ToggleSingleGroupWithItem,
@@ -3,7 +3,7 @@ import { useMdastNodeUpdater, NestedLexicalEditor } from "../plugins/core/Nested
3
3
  import { PropertyPopover } from "../plugins/core/PropertyPopover.js";
4
4
  import styles from "../styles/ui.module.css.js";
5
5
  const isExpressionValue = (value) => {
6
- if (typeof value === "object" && value !== null && "type" in value && value.type === "mdxJsxAttributeValueExpression" && "value" in value && typeof value.value === "string") {
6
+ if (value !== null && typeof value === "object" && "type" in value && "value" in value && typeof value.value === "string") {
7
7
  return true;
8
8
  }
9
9
  return false;
@@ -12,10 +12,10 @@ function commentFromMarkdown(_options) {
12
12
  exit: {
13
13
  comment(token) {
14
14
  const text = this.resume();
15
- if (_options == null ? void 0 : _options.ast) {
15
+ if (_options.ast) {
16
16
  this.enter(
17
17
  {
18
- // @ts-expect-error: hush.
18
+ // @ts-expect-error: not typing this
19
19
  type: "comment",
20
20
  value: "",
21
21
  commentValue: text.slice(0, -2)
@@ -0,0 +1,114 @@
1
+ import { splice } from "../../micromark-util-chunked/index.js";
2
+ import { classifyCharacter } from "../../micromark-util-classify-character/index.js";
3
+ import { resolveAll } from "../../micromark-util-resolve-all/index.js";
4
+ function gfmStrikethrough(options) {
5
+ const options_ = options || {};
6
+ let single = options_.singleTilde;
7
+ const tokenizer = {
8
+ tokenize: tokenizeStrikethrough,
9
+ resolveAll: resolveAllStrikethrough
10
+ };
11
+ if (single === null || single === void 0) {
12
+ single = true;
13
+ }
14
+ return {
15
+ text: {
16
+ [126]: tokenizer
17
+ },
18
+ insideSpan: {
19
+ null: [tokenizer]
20
+ },
21
+ attentionMarkers: {
22
+ null: [126]
23
+ }
24
+ };
25
+ function resolveAllStrikethrough(events, context) {
26
+ let index = -1;
27
+ while (++index < events.length) {
28
+ if (events[index][0] === "enter" && events[index][1].type === "strikethroughSequenceTemporary" && events[index][1]._close) {
29
+ let open = index;
30
+ while (open--) {
31
+ if (events[open][0] === "exit" && events[open][1].type === "strikethroughSequenceTemporary" && events[open][1]._open && // If the sizes are the same:
32
+ events[index][1].end.offset - events[index][1].start.offset === events[open][1].end.offset - events[open][1].start.offset) {
33
+ events[index][1].type = "strikethroughSequence";
34
+ events[open][1].type = "strikethroughSequence";
35
+ const strikethrough = {
36
+ type: "strikethrough",
37
+ start: Object.assign({}, events[open][1].start),
38
+ end: Object.assign({}, events[index][1].end)
39
+ };
40
+ const text = {
41
+ type: "strikethroughText",
42
+ start: Object.assign({}, events[open][1].end),
43
+ end: Object.assign({}, events[index][1].start)
44
+ };
45
+ const nextEvents = [
46
+ ["enter", strikethrough, context],
47
+ ["enter", events[open][1], context],
48
+ ["exit", events[open][1], context],
49
+ ["enter", text, context]
50
+ ];
51
+ const insideSpan = context.parser.constructs.insideSpan.null;
52
+ if (insideSpan) {
53
+ splice(
54
+ nextEvents,
55
+ nextEvents.length,
56
+ 0,
57
+ resolveAll(insideSpan, events.slice(open + 1, index), context)
58
+ );
59
+ }
60
+ splice(nextEvents, nextEvents.length, 0, [
61
+ ["exit", text, context],
62
+ ["enter", events[index][1], context],
63
+ ["exit", events[index][1], context],
64
+ ["exit", strikethrough, context]
65
+ ]);
66
+ splice(events, open - 1, index - open + 3, nextEvents);
67
+ index = open + nextEvents.length - 2;
68
+ break;
69
+ }
70
+ }
71
+ }
72
+ }
73
+ index = -1;
74
+ while (++index < events.length) {
75
+ if (events[index][1].type === "strikethroughSequenceTemporary") {
76
+ events[index][1].type = "data";
77
+ }
78
+ }
79
+ return events;
80
+ }
81
+ function tokenizeStrikethrough(effects, ok, nok) {
82
+ const previous = this.previous;
83
+ const events = this.events;
84
+ let size = 0;
85
+ return start;
86
+ function start(code) {
87
+ if (previous === 126 && events[events.length - 1][1].type !== "characterEscape") {
88
+ return nok(code);
89
+ }
90
+ effects.enter("strikethroughSequenceTemporary");
91
+ return more(code);
92
+ }
93
+ function more(code) {
94
+ const before = classifyCharacter(previous);
95
+ if (code === 126) {
96
+ if (size > 1)
97
+ return nok(code);
98
+ effects.consume(code);
99
+ size++;
100
+ return more;
101
+ }
102
+ if (size < 2 && !single)
103
+ return nok(code);
104
+ const token = effects.exit("strikethroughSequenceTemporary");
105
+ const after = classifyCharacter(code);
106
+ token._open = !after || after === 2 && Boolean(before);
107
+ token._close = !before || before === 2 && Boolean(after);
108
+ return ok(code);
109
+ }
110
+ }
111
+ }
112
+ export {
113
+ gfmStrikethrough
114
+ };
@@ -0,0 +1,29 @@
1
+ function splice(list, start, remove, items) {
2
+ const end = list.length;
3
+ let chunkStart = 0;
4
+ let parameters;
5
+ if (start < 0) {
6
+ start = -start > end ? 0 : end + start;
7
+ } else {
8
+ start = start > end ? end : start;
9
+ }
10
+ remove = remove > 0 ? remove : 0;
11
+ if (items.length < 1e4) {
12
+ parameters = Array.from(items);
13
+ parameters.unshift(start, remove);
14
+ list.splice(...parameters);
15
+ } else {
16
+ if (remove)
17
+ list.splice(start, remove);
18
+ while (chunkStart < items.length) {
19
+ parameters = items.slice(chunkStart, chunkStart + 1e4);
20
+ parameters.unshift(start, 0);
21
+ list.splice(...parameters);
22
+ chunkStart += 1e4;
23
+ start += 1e4;
24
+ }
25
+ }
26
+ }
27
+ export {
28
+ splice
29
+ };
@@ -0,0 +1,12 @@
1
+ import { markdownLineEndingOrSpace, unicodeWhitespace, unicodePunctuation } from "micromark-util-character";
2
+ function classifyCharacter(code) {
3
+ if (code === null || markdownLineEndingOrSpace(code) || unicodeWhitespace(code)) {
4
+ return 1;
5
+ }
6
+ if (unicodePunctuation(code)) {
7
+ return 2;
8
+ }
9
+ }
10
+ export {
11
+ classifyCharacter
12
+ };
@@ -0,0 +1,15 @@
1
+ function resolveAll(constructs, events, context) {
2
+ const called = [];
3
+ let index = -1;
4
+ while (++index < constructs.length) {
5
+ const resolve = constructs[index].resolveAll;
6
+ if (resolve && !called.includes(resolve)) {
7
+ events = resolve(events, context);
8
+ called.push(resolve);
9
+ }
10
+ }
11
+ return events;
12
+ }
13
+ export {
14
+ resolveAll
15
+ };
@@ -21,12 +21,12 @@ const insertCodeBlock$ = Signal((r) => {
21
21
  const appendCodeBlockEditorDescriptor$ = Appender(codeBlockEditorDescriptors$);
22
22
  const codeBlockPlugin = realmPlugin({
23
23
  update(realm, params) {
24
- realm.pub(defaultCodeBlockLanguage$, (params == null ? void 0 : params.defaultCodeBlockLanguage) || "");
24
+ realm.pub(defaultCodeBlockLanguage$, (params == null ? void 0 : params.defaultCodeBlockLanguage) ?? "");
25
25
  },
26
26
  init(realm, params) {
27
27
  realm.pubIn({
28
28
  [addActivePlugin$]: "codeblock",
29
- [codeBlockEditorDescriptors$]: (params == null ? void 0 : params.codeBlockEditorDescriptors) || [],
29
+ [codeBlockEditorDescriptors$]: (params == null ? void 0 : params.codeBlockEditorDescriptors) ?? [],
30
30
  [addImportVisitor$]: MdastCodeVisitor,
31
31
  [addLexicalNode$]: CodeBlockNode,
32
32
  [addExportVisitor$]: CodeBlockVisitor
@@ -30,15 +30,15 @@ const codeMirrorPlugin = realmPlugin({
30
30
  update(r, params) {
31
31
  r.pubIn({
32
32
  [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
33
- [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) || [],
33
+ [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
34
34
  [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
35
35
  });
36
36
  },
37
37
  init(r, params) {
38
38
  r.pubIn({
39
39
  [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
40
- [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) || [],
41
- [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) || {}),
40
+ [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
41
+ [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) ?? {}),
42
42
  [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
43
43
  });
44
44
  }
@@ -46,7 +46,7 @@ const codeMirrorPlugin = realmPlugin({
46
46
  function buildCodeBlockDescriptor(codeBlockLanguages) {
47
47
  return {
48
48
  match(language, meta) {
49
- return Boolean(codeBlockLanguages.hasOwnProperty(language || "")) && !Boolean(meta);
49
+ return Boolean(Object.hasOwn(codeBlockLanguages, language ?? "")) && !meta;
50
50
  },
51
51
  priority: 1,
52
52
  Editor: CodeMirrorEditor
@@ -42,6 +42,9 @@ import SvgRichText from "../../icons/rich_text.svg.js";
42
42
  import SvgSettings from "../../icons/settings.svg.js";
43
43
  import SvgTable from "../../icons/table.svg.js";
44
44
  import SvgUndo from "../../icons/undo.svg.js";
45
+ import SvgStrikethroughS from "../../icons/strikethrough_s.svg.js";
46
+ import SvgSuperscript from "../../icons/superscript.svg.js";
47
+ import SvgSubscript from "../../icons/subscript.svg.js";
45
48
  const IconMap = {
46
49
  add_column: SvgAddColumn,
47
50
  add_photo: SvgAddPhoto,
@@ -84,6 +87,9 @@ const IconMap = {
84
87
  redo: SvgRedo,
85
88
  rich_text: SvgRichText,
86
89
  settings: SvgSettings,
90
+ strikeThrough: SvgStrikethroughS,
91
+ subscript: SvgSubscript,
92
+ superscript: SvgSuperscript,
87
93
  table: SvgTable,
88
94
  undo: SvgUndo
89
95
  };