@lobehub/editor 4.15.1 → 4.16.0

package/es/codemirror/style.js

@@ -0,0 +1,82 @@
+import { createStaticStyles } from "antd-style";
+//#region src/codemirror/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: 100%;
+    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+    border-radius: var(--lobe-markdown-border-radius);
+
+    background: ${cssVar.colorFillQuaternary};
+
+    .cm-hidden-actions {
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    .cm-language-select {
+      opacity: 0.5;
+      filter: grayscale(100%);
+      transition:
+        opacity,
+        grayscale 0.2s ease-in-out;
+    }
+
+    &.selected {
+      user-select: none;
+    }
+
+    &.selected::after {
+      pointer-events: none;
+      content: '';
+
+      position: absolute;
+      z-index: 10;
+      inset: 0;
+
+      width: 100%;
+      height: 100%;
+
+      opacity: 0.2;
+      background: ${cssVar.yellow};
+
+      transition: all 0.3s;
+    }
+
+    .cm-container {
+      position: relative;
+      width: 100%;
+      border-block-start: 1px solid ${cssVar.colorFillQuaternary};
+    }
+
+    .cm-container-collapsed {
+      overflow: hidden;
+      height: 0;
+      border-block-start: none;
+    }
+
+    .cm-textarea {
+      height: 44px;
+      opacity: 0;
+    }
+
+    &:hover {
+      .cm-hidden-actions {
+        opacity: 1;
+      }
+
+      .cm-language-select {
+        opacity: 1;
+        filter: grayscale(0);
+      }
+    }
+  `);
+//#endregion
+export { styles };

package/es/codemirror/theme.d.ts

@@ -0,0 +1,132 @@
+//#region src/codemirror/theme.d.ts
+declare const lobeTheme: {
+  '&': {
+    '& .cm-cursor': {
+      'border-left-color': string;
+    };
+    '& .cm-cursor.cm-cursor-primary': {
+      'border-inline-start': string;
+    };
+    '& .cm-gutters': {
+      'background-color': string;
+      border: string;
+      color: string;
+      cursor: string;
+    };
+    '& .cm-line': {
+      '& .cm-atom': {
+        color: string;
+      };
+      '& .cm-attribute': {
+        color: string;
+      };
+      '& .cm-builtin': {
+        color: string;
+        fontStyle: string;
+      };
+      '& .cm-comment': {
+        color: string;
+        fontStyle: string;
+      };
+      '& .cm-foldPlaceholder': {
+        background: string;
+        border: string;
+        color: string;
+        display: string;
+        height: string;
+        padding: number;
+        'vertical-align': string;
+        width: string;
+      };
+      '& .cm-function': {
+        color: string;
+      };
+      '& .cm-header': {
+        color: string;
+      };
+      '& .cm-keyword': {
+        color: string;
+      };
+      '& .cm-meta': {
+        color: string;
+      };
+      '& .cm-modifier': {
+        color: string;
+      };
+      '& .cm-number': {
+        color: string;
+      };
+      '& .cm-operator': {
+        color: string;
+      };
+      '& .cm-property': {
+        color: string;
+      };
+      '& .cm-punctuation': {
+        color: string;
+      };
+      '& .cm-qualifier': {
+        color: string;
+      };
+      '& .cm-string': {
+        color: string;
+      };
+      '& .cm-string-2': {
+        color: string;
+      };
+      '& .cm-tag': {
+        color: string;
+      };
+      '& .cm-tag.cm-bracket': {
+        color: string;
+      };
+      '& .cm-type': {
+        color: string;
+      };
+      '& .cm-variable': {
+        color: string;
+      };
+      '& .cm-variable-2': {
+        color: string;
+      };
+      '& .cm-variable-3': {
+        color: string;
+      };
+      '& .cm-variable.cm-callee': {
+        color: string;
+      };
+      '& .cm-variable.cm-def': {
+        color: string;
+      };
+      color: string;
+      'padding-inline': string;
+    };
+  };
+  '& .cm-selectionBackground': {
+    background: string;
+  };
+  '& .cm-selectionMatch': {
+    background: string;
+  };
+  '&.cm-editor': {
+    background: string;
+    cursor: string;
+    'padding-block': string;
+    width: string;
+  };
+  '&.cm-editor span': {
+    'font-family': string;
+    'font-size': string;
+  };
+  '&.cm-editor.cm-focused .cm-selectionBackground': {
+    background: string;
+  };
+  '&.cm-editor.cm-focused .cm-selectionLineGutter': {
+    color: string;
+  };
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+    background: string;
+  };
+};
+//#endregion
+export { lobeTheme };

package/es/codemirror/theme.js

@@ -0,0 +1,75 @@
+import { cssVar } from "antd-style";
+//#region src/codemirror/theme.ts
+const lobeTheme = {
+	"&": {
+		"& .cm-cursor": { "border-left-color": cssVar.colorPrimary },
+		"& .cm-cursor.cm-cursor-primary": { "border-inline-start": `2px solid ${cssVar.colorPrimary} !important` },
+		"& .cm-gutters": {
+			"background-color": cssVar.colorBgContainer,
+			"border": "none",
+			"color": cssVar.colorTextQuaternary,
+			"cursor": "default"
+		},
+		"& .cm-line": {
+			"& .cm-atom": { color: cssVar.purple10 },
+			"& .cm-attribute": { color: cssVar.purple10 },
+			"& .cm-builtin": {
+				color: cssVar.volcano10,
+				fontStyle: "italic"
+			},
+			"& .cm-comment": {
+				color: cssVar.colorTextQuaternary,
+				fontStyle: "italic"
+			},
+			"& .cm-foldPlaceholder": {
+				"background": `url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23E8E8E8' width='16' height='16' rx='2'/%3E%3Cpath d='M2.75 7.984a.875.875 0 1 0 1.75 0 .875.875 0 0 0-1.75 0Zm4.375 0a.875.875 0 1 0 1.75 0 .875.875 0 0 0-1.75 0Zm4.375 0a.875.875 0 1 0 1.75 0 .875.875 0 0 0-1.75 0Z' fill='%232A3238'/%3E%3C/g%3E%3C/svg%3E") no-repeat`,
+				"border": "none",
+				"color": "transparent",
+				"display": "inline-block",
+				"height": "16px",
+				"padding": 0,
+				"vertical-align": "middle",
+				"width": "16px"
+			},
+			"& .cm-function": { color: cssVar.geekblue10 },
+			"& .cm-header": { color: cssVar.colorInfo },
+			"& .cm-keyword": { color: cssVar.colorInfo },
+			"& .cm-meta": { color: cssVar.colorText },
+			"& .cm-modifier": { color: cssVar.colorInfo },
+			"& .cm-number": { color: cssVar.volcano10 },
+			"& .cm-operator": { color: cssVar.colorInfo },
+			"& .cm-property": { color: cssVar.volcano10 },
+			"& .cm-punctuation": { color: cssVar.colorInfo },
+			"& .cm-qualifier": { color: cssVar.colorWarning },
+			"& .cm-string": { color: cssVar.colorSuccess },
+			"& .cm-string-2": { color: cssVar.colorSuccess },
+			"& .cm-tag": { color: cssVar.volcano10 },
+			"& .cm-tag.cm-bracket": { color: cssVar.colorInfo },
+			"& .cm-type": { color: cssVar.colorWarning },
+			"& .cm-variable": { color: cssVar.colorText },
+			"& .cm-variable-2": { color: cssVar.geekblue10 },
+			"& .cm-variable-3": { color: cssVar.colorWarning },
+			"& .cm-variable.cm-callee": { color: cssVar.geekblue10 },
+			"& .cm-variable.cm-def": { color: cssVar.colorText },
+			"color": cssVar.colorText,
+			"padding-inline": "12px"
+		}
+	},
+	"& .cm-selectionBackground": { background: "transparent" },
+	"& .cm-selectionMatch": { background: `${cssVar.colorFillSecondary} !important` },
+	"&.cm-editor": {
+		"background": "transparent",
+		"cursor": "text",
+		"padding-block": "12px",
+		"width": "100%"
+	},
+	"&.cm-editor span": {
+		"font-family": cssVar.fontFamilyCode,
+		"font-size": "calc(var(--lobe-markdown-font-size) * 0.8)"
+	},
+	"&.cm-editor.cm-focused .cm-selectionBackground": { background: cssVar.colorPrimaryBg },
+	"&.cm-editor.cm-focused .cm-selectionLineGutter": { color: cssVar.colorText },
+	"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": { background: cssVar.yellow }
+};
+//#endregion
+export { lobeTheme };

package/es/codemirror/types.d.ts

@@ -0,0 +1,53 @@
+//#region src/codemirror/types.d.ts
+interface CodeMirrorMode {
+  ext?: string[];
+  name: string;
+  syntax: string;
+  value: string;
+}
+interface CodeMirrorLabels {
+  copy?: string;
+  selectLanguage?: string;
+  showLineNumbers?: string;
+  tabSize?: string;
+  useTabs?: string;
+}
+interface CopyButtonProps {
+  className?: string;
+  labels?: Pick<CodeMirrorLabels, 'copy'>;
+  onCopy: () => void;
+}
+interface LanguageSelectProps {
+  className?: string;
+  labels?: Pick<CodeMirrorLabels, 'selectLanguage'>;
+  onLanguageChange: (value: string) => void;
+  options?: CodeMirrorMode[];
+  selectedLang: string;
+}
+interface MoreOptionsProps {
+  labels?: Pick<CodeMirrorLabels, 'showLineNumbers' | 'tabSize' | 'useTabs'>;
+  onShowLineNumbersChange: (checked: boolean) => void;
+  onTabSizeChange: (value: number | null) => void;
+  onUseTabsChange: (checked: boolean) => void;
+  showLineNumbers: boolean;
+  tabSize: number;
+  useTabs: boolean;
+}
+interface ToolbarProps {
+  expand?: boolean;
+  labels?: CodeMirrorLabels;
+  languageOptions?: CodeMirrorMode[];
+  onClick?: () => void;
+  onCopy: () => void;
+  onLanguageChange: (value: string) => void;
+  onShowLineNumbersChange: (checked: boolean) => void;
+  onTabSizeChange: (value: number | null) => void;
+  onUseTabsChange: (checked: boolean) => void;
+  selectedLang: string;
+  showLineNumbers: boolean;
+  tabSize: number;
+  toggleExpand?: () => void;
+  useTabs: boolean;
+}
+//#endregion
+export { CodeMirrorLabels, CodeMirrorMode, CopyButtonProps, LanguageSelectProps, MoreOptionsProps, ToolbarProps };

package/es/codemirror.d.ts

@@ -1,264 +1,10 @@
-import { FC } from "react";
-
-//#region src/codemirror/types.d.ts
-interface CodeMirrorMode {
-  ext?: string[];
-  name: string;
-  syntax: string;
-  value: string;
-}
-interface CodeMirrorLabels {
-  copy?: string;
-  selectLanguage?: string;
-  showLineNumbers?: string;
-  tabSize?: string;
-  useTabs?: string;
-}
-interface CopyButtonProps {
-  className?: string;
-  labels?: Pick<CodeMirrorLabels, 'copy'>;
-  onCopy: () => void;
-}
-interface LanguageSelectProps {
-  className?: string;
-  labels?: Pick<CodeMirrorLabels, 'selectLanguage'>;
-  onLanguageChange: (value: string) => void;
-  options?: CodeMirrorMode[];
-  selectedLang: string;
-}
-interface MoreOptionsProps {
-  labels?: Pick<CodeMirrorLabels, 'showLineNumbers' | 'tabSize' | 'useTabs'>;
-  onShowLineNumbersChange: (checked: boolean) => void;
-  onTabSizeChange: (value: number | null) => void;
-  onUseTabsChange: (checked: boolean) => void;
-  showLineNumbers: boolean;
-  tabSize: number;
-  useTabs: boolean;
-}
-interface ToolbarProps {
-  expand?: boolean;
-  labels?: CodeMirrorLabels;
-  languageOptions?: CodeMirrorMode[];
-  onClick?: () => void;
-  onCopy: () => void;
-  onLanguageChange: (value: string) => void;
-  onShowLineNumbersChange: (checked: boolean) => void;
-  onTabSizeChange: (value: number | null) => void;
-  onUseTabsChange: (checked: boolean) => void;
-  selectedLang: string;
-  showLineNumbers: boolean;
-  tabSize: number;
-  toggleExpand?: () => void;
-  useTabs: boolean;
-}
-//#endregion
-//#region src/codemirror/components/CopyButton.d.ts
-declare const CopyButton: FC<CopyButtonProps>;
-//#endregion
-//#region src/codemirror/components/LanguageSelect.d.ts
-declare const LanguageSelect: FC<LanguageSelectProps>;
-//#endregion
-//#region src/codemirror/components/MoreOptions.d.ts
-declare const MoreOptions: FC<MoreOptionsProps>;
-//#endregion
-//#region src/codemirror/components/Toolbar.d.ts
-declare const Toolbar: FC<ToolbarProps>;
-//#endregion
-//#region src/codemirror/constants.d.ts
-declare const LANGUAGES: CodeMirrorMode[];
-//#endregion
-//#region src/codemirror/loader.d.ts
-interface CodeMirrorOptions {
-  className?: string;
-  foldGutter?: boolean;
-  history?: any;
-  indentWithTabs?: boolean;
-  lineNumbers?: boolean;
-  lineWrapping?: boolean;
-  mode?: string;
-  preventCopy?: boolean;
-  readOnly?: boolean;
-  tabSize?: number;
-  theme?: 'default';
-  value?: string;
-}
-interface ICodeMirrorInstance {
-  blur(): void;
-  clearHistory(): void;
-  destroy(): void;
-  focus(): void;
-  foldGutter?: boolean;
-  foldLines(): number[];
-  foldLines(lines: number[]): void;
-  formatAll(): void;
-  getHistory(): any;
-  getLine(line: number): string;
-  getSelection(): string;
-  getValue: () => string;
-  historyRedoDepth(): number;
-  historyUndoDepth(): number;
-  lineCount(): number;
-  on(event: 'change' | 'blur' | 'focus' | 'keyup' | 'fold' | 'unfold' | 'keydown' | 'rightOut' | 'leftOut', handler: (...args: any[]) => void): void;
-  optionHelper: {
-    theme: {
-      reconfigure: (theme: any) => void;
-    };
-  };
-  redoSelection(): void;
-  replaceSelection(text: string): void;
-  setOption(option: keyof CodeMirrorOptions, value: any): void;
-  setSelection(anchor: number, header: number): void;
-  setSelectionToEnd(): void;
-  setSelectionToStart(): void;
-  setValue(value: string): void;
-  undoSelection(): void;
-  view: {
-    constructor: {
-      theme: (options: any, settings: any) => any;
-    };
-    dispatch: (params: {
-      effects: any;
-    }) => void;
-  };
-}
-interface ICodeMirror {
-  fromTextArea: (textarea: HTMLTextAreaElement, options?: CodeMirrorOptions) => ICodeMirrorInstance;
-  new (dom: HTMLElement, options?: CodeMirrorOptions): ICodeMirrorInstance;
-}
-declare function loadCodeMirror(cdnUrl?: string): Promise<ICodeMirror>;
-//#endregion
-//#region src/codemirror/style.d.ts
-declare const styles: string;
-//#endregion
-//#region src/codemirror/theme.d.ts
-declare const lobeTheme: {
-  '&': {
-    '& .cm-cursor': {
-      'border-left-color': string;
-    };
-    '& .cm-cursor.cm-cursor-primary': {
-      'border-inline-start': string;
-    };
-    '& .cm-gutters': {
-      'background-color': string;
-      border: string;
-      color: string;
-      cursor: string;
-    };
-    '& .cm-line': {
-      '& .cm-atom': {
-        color: string;
-      };
-      '& .cm-attribute': {
-        color: string;
-      };
-      '& .cm-builtin': {
-        color: string;
-        fontStyle: string;
-      };
-      '& .cm-comment': {
-        color: string;
-        fontStyle: string;
-      };
-      '& .cm-foldPlaceholder': {
-        background: string;
-        border: string;
-        color: string;
-        display: string;
-        height: string;
-        padding: number;
-        'vertical-align': string;
-        width: string;
-      };
-      '& .cm-function': {
-        color: string;
-      };
-      '& .cm-header': {
-        color: string;
-      };
-      '& .cm-keyword': {
-        color: string;
-      };
-      '& .cm-meta': {
-        color: string;
-      };
-      '& .cm-modifier': {
-        color: string;
-      };
-      '& .cm-number': {
-        color: string;
-      };
-      '& .cm-operator': {
-        color: string;
-      };
-      '& .cm-property': {
-        color: string;
-      };
-      '& .cm-punctuation': {
-        color: string;
-      };
-      '& .cm-qualifier': {
-        color: string;
-      };
-      '& .cm-string': {
-        color: string;
-      };
-      '& .cm-string-2': {
-        color: string;
-      };
-      '& .cm-tag': {
-        color: string;
-      };
-      '& .cm-tag.cm-bracket': {
-        color: string;
-      };
-      '& .cm-type': {
-        color: string;
-      };
-      '& .cm-variable': {
-        color: string;
-      };
-      '& .cm-variable-2': {
-        color: string;
-      };
-      '& .cm-variable-3': {
-        color: string;
-      };
-      '& .cm-variable.cm-callee': {
-        color: string;
-      };
-      '& .cm-variable.cm-def': {
-        color: string;
-      };
-      color: string;
-      'padding-inline': string;
-    };
-  };
-  '& .cm-selectionBackground': {
-    background: string;
-  };
-  '& .cm-selectionMatch': {
-    background: string;
-  };
-  '&.cm-editor': {
-    background: string;
-    cursor: string;
-    'padding-block': string;
-    width: string;
-  };
-  '&.cm-editor span': {
-    'font-family': string;
-    'font-size': string;
-  };
-  '&.cm-editor.cm-focused .cm-selectionBackground': {
-    background: string;
-  };
-  '&.cm-editor.cm-focused .cm-selectionLineGutter': {
-    color: string;
-  };
-  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: string;
-  };
-};
-//#endregion
+import { CodeMirrorLabels, CodeMirrorMode, CopyButtonProps, LanguageSelectProps, MoreOptionsProps, ToolbarProps } from "./codemirror/types.js";
+import { CopyButton } from "./codemirror/components/CopyButton.js";
+import { LanguageSelect } from "./codemirror/components/LanguageSelect.js";
+import { MoreOptions } from "./codemirror/components/MoreOptions.js";
+import { Toolbar } from "./codemirror/components/Toolbar.js";
+import { LANGUAGES } from "./codemirror/constants.js";
+import { CodeMirrorOptions, ICodeMirror, ICodeMirrorInstance, loadCodeMirror } from "./codemirror/loader.js";
+import { styles } from "./codemirror/style.js";
+import { lobeTheme } from "./codemirror/theme.js";
 export { type CodeMirrorLabels, type CodeMirrorMode, type CodeMirrorOptions, CopyButton, type CopyButtonProps, type ICodeMirror, type ICodeMirrorInstance, LANGUAGES, LanguageSelect, type LanguageSelectProps, MoreOptions, type MoreOptionsProps, Toolbar, type ToolbarProps, loadCodeMirror, lobeTheme, styles };

package/es/codemirror.js

@@ -1,2 +1,9 @@
-import { a as MoreOptions, c as CopyButton, i as Toolbar, n as styles, o as LanguageSelect, r as loadCodeMirror, s as LANGUAGES, t as lobeTheme } from "./codemirror-3POv7f__.js";
+import { CopyButton } from "./codemirror/components/CopyButton.js";
+import { LANGUAGES } from "./codemirror/constants.js";
+import { LanguageSelect } from "./codemirror/components/LanguageSelect.js";
+import { MoreOptions } from "./codemirror/components/MoreOptions.js";
+import { Toolbar } from "./codemirror/components/Toolbar.js";
+import { loadCodeMirror } from "./codemirror/loader.js";
+import { styles } from "./codemirror/style.js";
+import { lobeTheme } from "./codemirror/theme.js";
 export { CopyButton, LANGUAGES, LanguageSelect, MoreOptions, Toolbar, loadCodeMirror, lobeTheme, styles };

package/es/common/canUseDOM.js

@@ -0,0 +1,11 @@
+//#region src/common/canUseDOM.ts
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const CAN_USE_DOM = typeof window !== "undefined" && window.document !== void 0 && window.document.createElement !== void 0;
+//#endregion
+export { CAN_USE_DOM };

package/es/common/sys.js

@@ -0,0 +1,27 @@
+import { __esmMin } from "../_virtual/_rolldown/runtime.js";
+import { IS_APPLE, IS_APPLE as isApple } from "@lexical/utils";
+//#region src/common/sys.ts
+var nodeDetect, browserDetect, isNode, isBrowser, macOSDetect, CONTROL_OR_META;
+var init_sys = __esmMin((() => {
+	nodeDetect = () => {
+		return typeof process !== "undefined" && process.versions && !!process.versions.node;
+	};
+	browserDetect = () => {
+		return typeof window !== "undefined" && window.document !== void 0;
+	};
+	isNode = nodeDetect();
+	isBrowser = browserDetect();
+	macOSDetect = () => {
+		if (isNode) return process.platform === "darwin";
+		if (isBrowser) return window.navigator.platform.includes("Mac");
+		return false;
+	};
+	macOSDetect();
+	CONTROL_OR_META = {
+		ctrlKey: !IS_APPLE,
+		metaKey: IS_APPLE
+	};
+}));
+//#endregion
+init_sys();
+export { CONTROL_OR_META, init_sys, isApple };