@blocklet/editor 2.4.89 → 2.4.91

package/lib/main/index.d.ts

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import '@iconify/iconify';
+import './index.css';
+import './style/editable.css';
 import { EditorState, Klass, LexicalEditor, LexicalNode } from 'lexical';
 import React, { MutableRefObject, ReactNode, type JSX } from 'react';
 export interface BlockletEditorProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'placeholder' | 'onChange'> {

package/lib/main/index.js

@@ -6,8 +6,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * LICENSE file in the root directory of this source tree.
  *
  */
+import '@iconify/iconify';
+import './index.css';
+import './style/editable.css';
 import { cx } from '@emotion/css';
-import styled from '@emotion/styled';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useCallback, useEffect, useRef } from 'react';
@@ -17,6 +19,7 @@ import { SettingsContext } from './context/SettingsContext';
 import { SharedAutocompleteContext } from './context/SharedAutocompleteContext';
 import { SharedHistoryContext } from './context/SharedHistoryContext';
 import Editor from './editor';
+import { EditorRoot } from './editor-root';
 import PlaygroundNodes from './nodes/PlaygroundNodes';
 import { TableContext } from './plugins/TablePlugin';
 import { useCustomTheme } from './themes/customTheme';
@@ -34,9 +37,10 @@ export default function BlockletEditor({ editorState, nodes = PlaygroundNodes, e
         },
         theme,
     };
-    return (_jsx(SettingsContext, { children: _jsx(SharedHistoryContext, { children: _jsx(SharedAutocompleteContext, { children: _jsx(TableContext, { children: _jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorShell, { ...props, editable: editable }) }, muiTheme.palette.mode) }) }) }) }));
+    return (_jsx(SettingsContext, { children: _jsx(SharedHistoryContext, { children: _jsx(SharedAutocompleteContext, { children: _jsx(TableContext, { children: _jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorShell, { ...props, editable: editable }) }) }) }) }) }));
 }
 function EditorShell({ placeholder, children, prepend, editable, onChange, autoFocus, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, ...props }) {
+    const muiTheme = useTheme();
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         editor.setEditable(editable ?? true);
@@ -47,14 +51,5 @@ function EditorShell({ placeholder, children, prepend, editable, onChange, autoF
             editor.focus();
         }
     }, []);
-    return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, prepend: prepend, children: children }) }));
+    return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, "data-mode": muiTheme.palette.mode, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, prepend: prepend, children: children }) }));
 }
-const EditorRoot = styled.div `
-  container: blocklet-editor / inline-size;
-  margin: 0 auto;
-  border-radius: 4px;
-  position: relative;
-  line-height: 1.7;
-  font-weight: 400;
-  text-align: left;
-`;

package/lib/main/markdown-editor/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '@emotion/css';
-import styled from '@emotion/styled';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useCallback, useEffect, useRef } from 'react';
 import { $convertFromMarkdownString } from '@lexical/markdown';
 import Editor from './editor';
+import { EditorRoot } from '../editor-root';
 import nodes from './nodes';
 import { useCustomTheme } from '../themes/customTheme';
 import { MarkdownEditorThemeProvider } from './theme';
@@ -40,11 +40,3 @@ function EditorShell({ placeholder, children, editable, onChange, autoFocus, sho
     }, []);
     return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, mediaUrlPrefix: mediaUrlPrefix, children: children }) }));
 }
-const EditorRoot = styled.div `
-  margin: 0 auto;
-  border-radius: 4px;
-  position: relative;
-  line-height: 1.7;
-  font-weight: 400;
-  text-align: left;
-`;

package/lib/main/nodes/PlaygroundNodes.js

@@ -23,7 +23,6 @@ import { ExcalidrawNode } from './ExcalidrawNode';
 import { FigmaNode } from './FigmaNode';
 import { ImageNode } from './ImageNode';
 import { MermaidNode } from './MermaidNode';
-import { KeywordNode } from './KeywordNode';
 import { MentionNode } from './MentionNode';
 import { TweetNode } from './TweetNode';
 import { YouTubeNode } from './YouTubeNode';
@@ -60,7 +59,6 @@ const PlaygroundNodes = [
     EmojiNode,
     ExcalidrawNode,
     EquationNode,
-    KeywordNode,
     HorizontalRuleNode,
     TweetNode,
     YouTubeNode,

package/lib/main/style/editable.css

@@ -0,0 +1,476 @@
+/* ============================== toolbar ============================== */
+@container toolbar (max-width: 700px) {
+  .toolbar-item.font-size,
+  .toolbar-item.code,
+  .toolbar-item.alignment,
+  .toolbar-item.link,
+  .toolbar-item.aide,
+  .toolbar-item.color-picker,
+  .toolbar-item.text-format-additional {
+    display: none !important;
+  }
+}
+
+.toolbar {
+  display: flex;
+  margin-bottom: 1px;
+  padding: 4px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  vertical-align: middle;
+  overflow: auto;
+  container: toolbar / inline-size;
+}
+
+.toolbar button.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 8px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.toolbar button.toolbar-item:disabled {
+  cursor: not-allowed;
+}
+
+.toolbar button.toolbar-item.spaced {
+  margin-right: 4px;
+}
+
+.toolbar button.toolbar-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.toolbar button.toolbar-item:disabled .icon,
+.toolbar button.toolbar-item:disabled .text,
+.toolbar button.toolbar-item:disabled i.format,
+.toolbar button.toolbar-item:disabled .chevron-down {
+  opacity: 0.2;
+}
+
+.toolbar button.toolbar-item.active i {
+  opacity: 1;
+}
+
+.toolbar .toolbar-item.font-family .text {
+  display: block;
+  max-width: 40px;
+}
+
+.toolbar .code-language {
+  width: 150px;
+}
+
+.toolbar .toolbar-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.toolbar .toolbar-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.toolbar .toolbar-item .iconify {
+  display: flex;
+  width: 20px;
+  height: 20px;
+}
+
+.toolbar i.chevron-down {
+  margin-top: 3px;
+  margin-left: auto;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.toolbar i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+/* ============================== typeahead & menu ============================== */
+.typeahead-popover {
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  z-index: 1;
+}
+
+.typeahead-popover ul {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+  border-radius: 8px;
+  max-height: 280px;
+  overflow-y: scroll;
+}
+
+.typeahead-popover ul::-webkit-scrollbar {
+  display: none;
+}
+
+.typeahead-popover ul {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding: 8px 0;
+}
+
+.typeahead-popover ul li {
+  margin: 0;
+  min-width: 180px;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+}
+
+.typeahead-popover li {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  border: 0;
+}
+
+.typeahead-popover li.active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.typeahead-popover li .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.typeahead-popover li .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+/* blocklet embed option - disabled 样式 */
+.typeahead-popover ul li.embed-option-disabled {
+  color: #999;
+  cursor: default;
+}
+
+#typeahead-menu {
+  pointer-events: none;
+  z-index: 10001;
+}
+
+#typeahead-menu > * {
+  pointer-events: auto;
+}
+
+.component-picker-menu {
+  width: 200px;
+}
+
+.mentions-menu {
+  width: 250px;
+}
+
+.auto-embed-menu {
+  width: 200px;
+}
+
+.emoji-menu {
+  width: 200px;
+}
+
+/* ============================== link-editor ============================== */
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+.link-editor .link-input {
+  display: block;
+  width: calc(100% - 24px);
+  box-sizing: border-box;
+  margin: 8px 12px;
+  padding: 8px 12px;
+  border-radius: 15px;
+  font-size: 15px;
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.link-editor div.link-edit {
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.link-editor .link-input a {
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 30px;
+  text-overflow: ellipsis;
+}
+
+.link-editor .link-input a:hover {
+  text-decoration: underline;
+}
+
+.link-editor .font-size-wrapper,
+.link-editor .font-family-wrapper {
+  display: flex;
+  margin: 0 4px;
+}
+
+.link-editor select {
+  padding: 6px;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.075);
+  border-radius: 4px;
+}
+
+/* ============================== dropdown ============================== */
+.mention {
+  color: #666;
+}
+
+.mention:hover {
+  text-decoration: underline;
+}
+
+.mention:before {
+  display: inline-block;
+  content: '@';
+}
+
+.mention-typeahead-item-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 15px;
+  background-size: cover;
+}
+
+.dropdown {
+  z-index: 10001;
+  display: block;
+  position: fixed;
+  border-radius: 8px;
+  min-height: 40px;
+}
+
+.dropdown .item {
+  padding: 8px;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  border: 0;
+  max-width: 250px;
+  min-width: 100px;
+}
+
+.dropdown .item.fontsize-item,
+.dropdown .item.fontsize-item .text {
+  min-width: unset;
+}
+
+.dropdown .item .active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.dropdown .item:first-child {
+  margin-top: 8px;
+}
+
+.dropdown .item:last-child {
+  margin-bottom: 8px;
+}
+
+.dropdown .item .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.dropdown .item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 12px;
+  line-height: 16px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.dropdown .divider {
+  width: auto;
+  margin: 4px 8px;
+  height: 1px;
+}
+
+.dropdown-button-text {
+  margin-left: 8px;
+}
+
+@media screen and (max-width: 1100px) {
+  .dropdown-button-text {
+    display: none !important;
+  }
+  .font-size .dropdown-button-text {
+    display: flex !important;
+  }
+  .code-language .dropdown-button-text {
+    display: flex !important;
+  }
+}
+
+/* ============================== actions & table-cell-action ============================== */
+
+.actions {
+  position: absolute;
+  text-align: right;
+  padding: 10px;
+  bottom: 0;
+  right: 0;
+}
+
+.actions.tree-view {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+  vertical-align: -0.25em;
+}
+
+.action-button {
+  background-color: #eee;
+  border: 0;
+  padding: 8px 12px;
+  position: relative;
+  margin-left: 5px;
+  border-radius: 15px;
+  color: #222;
+  cursor: pointer;
+  display: flex;
+}
+
+.action-button .MuiLoadingButton-loadingIndicator {
+  position: relative;
+  left: 0;
+  margin-right: 8px;
+}
+
+.action-button:hover {
+  background-color: #ddd;
+  color: #000;
+}
+
+.action-button-mic.active {
+  animation: mic-pulsate-color 3s infinite;
+}
+button.action-button:disabled {
+  cursor: not-allowed;
+}
+
+.table-cell-action-button-container {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  will-change: transform;
+}
+.table-cell-action-button-container.table-cell-action-button-container--active {
+  pointer-events: auto;
+  opacity: 1;
+}
+.table-cell-action-button-container.table-cell-action-button-container--inactive {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.table-cell-action-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 0;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border-radius: 15px;
+  color: #222;
+  display: inline-block;
+  cursor: pointer;
+  opacity: 0.75;
+}

package/lib/main/themes/code-highlight/index.d.ts

@@ -1,35 +1,4 @@
-export declare const codeHighlightDark: {
-    atrule: string;
-    attr: string;
-    boolean: string;
-    builtin: string;
-    cdata: string;
-    char: string;
-    class: string;
-    comment: string;
-    constant: string;
-    deleted: string;
-    doctype: string;
-    entity: string;
-    function: string;
-    important: string;
-    inserted: string;
-    keyword: string;
-    namespace: string;
-    number: string;
-    operator: string;
-    prolog: string;
-    property: string;
-    punctuation: string;
-    regex: string;
-    selector: string;
-    string: string;
-    symbol: string;
-    tag: string;
-    url: string;
-    variable: string;
-};
-export declare const codeHighlightLight: {
+declare const codeHighlight: {
     atrule: string;
     attr: string;
     boolean: string;
@@ -60,3 +29,4 @@ export declare const codeHighlightLight: {
     url: string;
     variable: string;
 };
+export default codeHighlight;

package/lib/main/themes/code-highlight/index.js

@@ -1,55 +1,30 @@
 import { css } from '@emotion/css';
 // Dark theme tokens
 const tokenComment = css `
-  color: #6a9955;
+  color: var(--lexical-code-comment);
 `;
 const tokenPunctuation = css `
-  color: #d4d4d4;
+  color: var(--lexical-code-punctuation);
 `;
 const tokenProperty = css `
-  color: #9cdcfe;
+  color: var(--lexical-code-property);
 `;
 const tokenSelector = css `
-  color: #d7ba7d;
+  color: var(--lexical-code-selector);
 `;
 const tokenOperator = css `
-  color: #d4d4d4;
+  color: var(--lexical-code-operator);
 `;
 const tokenAttr = css `
-  color: #9cdcfe;
+  color: var(--lexical-code-attr);
 `;
 const tokenVariable = css `
-  color: #9cdcfe;
+  color: var(--lexical-code-variable);
 `;
 const tokenFunction = css `
-  color: #dcdcaa;
+  color: var(--lexical-code-function);
 `;
-// Light theme tokens - 更有活力和年轻化的配色，优化对比度
-const tokenCommentLight = css `
-  color: #1e8449;
-`;
-const tokenPunctuationLight = css `
-  color: #2c3e50;
-`;
-const tokenPropertyLight = css `
-  color: #e67e22;
-`;
-const tokenSelectorLight = css `
-  color: #c0392b;
-`;
-const tokenOperatorLight = css `
-  color: #8e44ad;
-`;
-const tokenAttrLight = css `
-  color: #2980b9;
-`;
-const tokenVariableLight = css `
-  color: #27ae60;
-`;
-const tokenFunctionLight = css `
-  color: #f39c12;
-`;
-export const codeHighlightDark = {
+const codeHighlight = {
     atrule: tokenAttr,
     attr: tokenAttr,
     boolean: tokenProperty,
@@ -80,34 +55,4 @@ export const codeHighlightDark = {
     url: tokenOperator,
     variable: tokenVariable,
 };
-export const codeHighlightLight = {
-    atrule: tokenAttrLight,
-    attr: tokenAttrLight,
-    boolean: tokenPropertyLight,
-    builtin: tokenSelectorLight,
-    cdata: tokenCommentLight,
-    char: tokenSelectorLight,
-    class: tokenFunctionLight,
-    comment: tokenCommentLight,
-    constant: tokenPropertyLight,
-    deleted: tokenPropertyLight,
-    doctype: tokenCommentLight,
-    entity: tokenOperatorLight,
-    function: tokenFunctionLight,
-    important: tokenVariableLight,
-    inserted: tokenSelectorLight,
-    keyword: tokenAttrLight,
-    namespace: tokenVariableLight,
-    number: tokenPropertyLight,
-    operator: tokenOperatorLight,
-    prolog: tokenCommentLight,
-    property: tokenPropertyLight,
-    punctuation: tokenPunctuationLight,
-    regex: tokenVariableLight,
-    selector: tokenSelectorLight,
-    string: tokenSelectorLight,
-    symbol: tokenPropertyLight,
-    tag: tokenPropertyLight,
-    url: tokenOperatorLight,
-    variable: tokenVariableLight,
-};
+export default codeHighlight;