@blocklet/editor 2.4.90 → 2.4.92

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,6 +6,9 @@ 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 { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';

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/viewer/index.d.ts

@@ -0,0 +1,5 @@
+import '../index.css';
+import { type JSX } from 'react';
+import { EditorViewerProps } from './types';
+export declare function BlockletEditorViewer({ editorState, markdown, ...props }: EditorViewerProps): JSX.Element;
+export type { EditorViewerProps };

package/lib/main/viewer/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '../index.css';
+import { cx } from '@emotion/css';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { $convertFromMarkdownString } from '@lexical/markdown';
+import { useTheme } from '@mui/material';
+import PlaygroundNodes from '../nodes/PlaygroundNodes';
+import { useCustomTheme } from '../themes/customTheme';
+import { PLAYGROUND_TRANSFORMERS } from '../plugins/MarkdownTransformers';
+import { EditorViewer } from './viewer';
+import { EditorRoot } from '../editor-root';
+export function BlockletEditorViewer({ editorState, markdown, ...props }) {
+    const muiTheme = useTheme();
+    const theme = useCustomTheme();
+    const initialConfig = {
+        namespace: 'Playground',
+        editorState: markdown && editorState ? () => $convertFromMarkdownString(editorState, PLAYGROUND_TRANSFORMERS) : editorState,
+        nodes: PlaygroundNodes,
+        editable: false,
+        onError: (error) => {
+            throw error;
+        },
+        theme,
+    };
+    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorRoot, { className: cx(props.className, 'be-shell'), "data-mode": muiTheme.palette.mode, children: _jsx(EditorViewer, { ...props }) }) }, muiTheme.palette.mode));
+}

package/lib/main/viewer/types.d.ts

@@ -0,0 +1,14 @@
+import { EditorState, LexicalEditor } from 'lexical';
+import { MutableRefObject, ReactNode } from 'react';
+export interface EditorViewerProps {
+    editorState?: string;
+    markdown?: boolean;
+    children?: ReactNode;
+    prepend?: ReactNode;
+    onChange?: (editorState: EditorState, editor: LexicalEditor) => void;
+    editorRef?: React.RefCallback<LexicalEditor> | MutableRefObject<LexicalEditor | null>;
+    onReady?: () => void;
+    enableHeadingsIdPlugin?: boolean;
+    onCheckboxChange?: (content: string) => Promise<any>;
+    className?: string;
+}

package/lib/main/viewer/types.js

@@ -0,0 +1 @@
+export {};

package/lib/main/viewer/viewer.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'react';
+import { EditorViewerProps } from './types';
+export declare function EditorViewer({ children, prepend, onChange, editorRef, onReady, enableHeadingsIdPlugin, onCheckboxChange, }: EditorViewerProps): JSX.Element;

package/lib/main/viewer/viewer.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@emotion/css';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import useHasNodes from '../hooks/useHasNodes';
+import ClickableLinkPlugin from '../plugins/ClickableLinkPlugin';
+import CodeHighlightPlugin from '../plugins/CodeHighlightPlugin';
+import CollapsiblePlugin from '../plugins/CollapsiblePlugin';
+import ListMaxIndentLevelPlugin from '../plugins/ListMaxIndentLevelPlugin';
+import MarkdownShortcutPlugin from '../plugins/MarkdownShortcutPlugin';
+import TabFocusPlugin from '../plugins/TabFocusPlugin';
+import ContentEditable from '../ui/ContentEditable';
+import { EditorRefPlugin } from '../../ext/LexicalEditorRefPlugin';
+import { HeadingsIdPlugin } from '../../ext/HeadingsIdPlugin';
+import { EditorReadyPlugin } from '../../ext/EditorReadyPlugin';
+import { BlurTextPlugin } from '../../ext/BlurTextPlugin';
+import { useResponsiveTable } from '../hooks/useResponsiveTable';
+import { EditorHolderPlugin } from '../../ext/EditorHolderPlugin';
+import { StyledEditorContent } from '../styled-editor-content';
+import { CodeCopyPlugin } from '../../ext/CodeCopyPlugin';
+import CheckboxPlugin from '../../ext/CheckboxPlugin';
+export function EditorViewer({ children, prepend, onChange, editorRef, onReady, enableHeadingsIdPlugin, onCheckboxChange, }) {
+    useResponsiveTable();
+    const hasNodes = useHasNodes();
+    return (_jsxs(_Fragment, { children: [prepend, _jsx(StyledEditorContent, { className: "be-content", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('code') && _jsx(CodeCopyPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('link') && _jsx(LinkPlugin, {}), _jsx(BlurTextPlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), _jsx(CheckboxPlugin, { send: onCheckboxChange }), children] }));
+}

package/lib/types.d.ts

@@ -1,4 +1,5 @@
-import { Completions, FetchTemplateTags, FetchTemplates } from './ext/Aide/types';
+import type { Completions, FetchTemplateTags, FetchTemplates } from './ext/Aide/types';
+export type { EditorState } from 'lexical';
 export * from './ext/Aide/types';
 export interface User {
     did: string;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.90",
+  "version": "2.4.92",
   "main": "lib/index.js",
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -64,6 +65,7 @@
     "mermaid": "^11.6.0",
     "path-parser": "^6.1.0",
     "react-error-boundary": "^3.1.4",
+    "react-lazy-with-preload": "^2.2.1",
     "react-player": "^2.16.0",
     "react-popper": "^2.3.0",
     "shiki": "1.14.1",
@@ -71,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.90"
+    "@blocklet/pdf": "2.4.92"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/lib/main/Settings.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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.
- *
- */
-import { type JSX } from 'react';
-export default function Settings(): JSX.Element;

package/lib/main/Settings.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// eslint-disable-next-line unicorn/filename-case
-/**
- * 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.
- *
- */
-import { useMemo, useState } from 'react';
-import { isDevPlayground } from './appSettings';
-import { useSettings } from './context/SettingsContext';
-import Switch from './ui/Switch';
-export default function Settings() {
-    const windowLocation = window.location;
-    const { setOption, settings: { measureTypingPerf, isRichText, isMaxLength, isCharLimit, isCharLimitUtf8, isAutocomplete, disableBeforeInput, showTableOfContents, }, } = useSettings();
-    const [showSettings, setShowSettings] = useState(false);
-    const [isSplitScreen, search] = useMemo(() => {
-        const parentWindow = window.parent;
-        const _search = windowLocation.search;
-        const _isSplitScreen = parentWindow && parentWindow.location.pathname === '/split/';
-        return [_isSplitScreen, _search];
-    }, [windowLocation]);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { id: "options-button", className: `editor-dev-button ${showSettings ? 'active' : ''}`, onClick: () => setShowSettings(!showSettings) }), showSettings ? (_jsxs("div", { className: "switches", children: [isDevPlayground && (_jsx(Switch, { onClick: () => {
-                            if (isSplitScreen) {
-                                window.parent.location.href = `/${search}`;
-                            }
-                            else {
-                                window.location.href = `/split/${search}`;
-                            }
-                        }, checked: isSplitScreen, text: "Split Screen" })), _jsx(Switch, { onClick: () => setOption('measureTypingPerf', !measureTypingPerf), checked: measureTypingPerf, text: "Measure Perf" }), _jsx(Switch, { onClick: () => {
-                            setOption('isRichText', !isRichText);
-                        }, checked: isRichText, text: "Rich Text" }), _jsx(Switch, { onClick: () => setOption('isCharLimit', !isCharLimit), checked: isCharLimit, text: "Char Limit" }), _jsx(Switch, { onClick: () => setOption('isCharLimitUtf8', !isCharLimitUtf8), checked: isCharLimitUtf8, text: "Char Limit (UTF-8)" }), _jsx(Switch, { onClick: () => setOption('isMaxLength', !isMaxLength), checked: isMaxLength, text: "Max Length" }), _jsx(Switch, { onClick: () => setOption('isAutocomplete', !isAutocomplete), checked: isAutocomplete, text: "Autocomplete" }), _jsx(Switch, { onClick: () => {
-                            setOption('disableBeforeInput', !disableBeforeInput);
-                            setTimeout(() => window.location.reload(), 500);
-                        }, checked: disableBeforeInput, text: "Legacy Events" }), _jsx(Switch, { onClick: () => {
-                            setOption('showTableOfContents', !showTableOfContents);
-                        }, checked: showTableOfContents, text: "Table Of Contents" })] })) : null] }));
-}

package/lib/main/plugins/KeywordsPlugin/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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.
- *
- */
-import { type JSX } from 'react';
-export default function KeywordsPlugin(): JSX.Element | null;