@blocklet/editor-lite 2.6.0

package/lib/main/styled-editor-content.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, styled, GlobalStyles, useTheme } from '@mui/material';
+const getShapeRadiusValue = (theme) => {
+    if (typeof theme.shape.borderRadius === 'number') {
+        return theme.shape.borderRadius;
+    }
+    return parseInt(theme.shape.borderRadius, 10);
+};
+const StyledEditorWrapper = styled(Box) `
+  position: relative;
+  .be-editable {
+    transition: padding-bottom 0.2s;
+    code {
+      white-space: pre-wrap;
+    }
+  }
+
+  &.editable {
+    > .be-editable {
+      padding: 8px 24px;
+    }
+  }
+
+  > .be-editable {
+    hr {
+      height: 0;
+      border: none;
+      border-top: 1px solid ${({ theme }) => theme.palette.divider};
+      margin: 1em 0;
+      cursor: pointer;
+    }
+
+    hr:after {
+      content: '';
+      display: block;
+      height: 2px;
+      background-color: #ccc;
+      line-height: 2px;
+    }
+
+    hr.selected {
+      outline: 2px solid rgb(60, 132, 244);
+      user-select: none;
+    }
+
+    // 增大最外层 list item 的 marginLeft, https://github.com/blocklet/discuss-kit/issues/2123
+    > ol > li,
+    > ul > li {
+      margin-left: 24px;
+    }
+
+    // collapsible dark-mode
+    summary.Collapsible__title:before {
+      border-left-color: ${({ theme }) => theme.palette.text.primary} !important;
+    }
+    .Collapsible__container[open] > .Collapsible__title:before {
+      border-left-color: transparent !important;
+      border-width: 6px 4px 0 4px;
+      border-top-color: ${({ theme }) => theme.palette.text.primary} !important;
+    }
+    .Collapsible__container {
+      background: ${({ theme }) => theme.palette.grey[50]};
+      border: 1px solid ${({ theme }) => theme.palette.divider};
+      border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+
+  /* table 支持圆角框 */
+  .PlaygroundEditorTheme__table {
+    border-collapse: separate; // 为了出现圆角效果
+    border-spacing: 0;
+  }
+  .PlaygroundEditorTheme__tableCell {
+    border-top: 0;
+    border-right: 1px solid ${({ theme }) => theme.palette.divider};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+    border-left: 0;
+  }
+  .PlaygroundEditorTheme__table tr:nth-of-type(1) {
+    th,
+    td {
+      border-top: 1px solid ${({ theme }) => theme.palette.divider};
+    }
+  }
+  .PlaygroundEditorTheme__table tr {
+    th:first-child,
+    td:first-child {
+      border-left: 1px solid ${({ theme }) => theme.palette.divider};
+    }
+  }
+  .PlaygroundEditorTheme__table tr:nth-of-type(1) {
+    th:first-child,
+    td:first-child {
+      border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+  .PlaygroundEditorTheme__table tr:nth-of-type(1) {
+    th:last-child,
+    td:last-child {
+      border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+  .PlaygroundEditorTheme__table tr:last-child {
+    th:first-child,
+    td:first-child {
+      border-bottom-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+  .PlaygroundEditorTheme__table tr:last-child {
+    th:first-child,
+    td:first-child {
+      border-bottom-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+  .PlaygroundEditorTheme__table tr:last-child td:last-child {
+    border-bottom-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  }
+
+  /* fix: 自定义样式引起的 cell 高度偏大的问题 */
+  .PlaygroundEditorTheme__tableCell p {
+    margin: 0;
+  }
+  table th,
+  .PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
+    background-color: ${({ theme }) => theme.palette.grey[100]} !important;
+  }
+  .PlaygroundEditorTheme__tableCellHeader {
+    background-color: ${({ theme }) => theme.palette.background.paper} !important;
+  }
+
+  @container blocklet-editor (max-width: 1000px) {
+    .be-editable span.be-image,
+    .be-editable span.be-image img {
+      width: 100% !important;
+    }
+  }
+
+  /* img/video 圆角样式 */
+  .be-editable div:has(> video) {
+    padding: 8px;
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    border-radius: ${({ theme }) => getShapeRadiusValue(theme) * 2}px;
+    overflow: hidden;
+    line-height: 1;
+  }
+
+  .be-editable video,
+  .be-editable img {
+    border-radius: 8px;
+  }
+
+  /* table 上下边距调 */
+  .be-editable p > table {
+    margin: 0;
+  }
+
+  /* list item 内 code block 对齐问题, 注意别影响内联 code block */
+  .be-editable li > code[data-language] {
+    margin-left: -20px;
+  }
+
+  /* heading 紧邻的 table 上边距, 调大 */
+  .be-editable h1 + p:has(table),
+  .be-editable h2 + p:has(table),
+  .be-editable h3 + p:has(table) {
+    padding-top: 4px;
+  }
+
+  /* fix: 文本与 image 间距问题 (docsmith 生成的文档有时候会把文本与 image 放在同一个 p 标签中) */
+  .be-editable p span + span.be-image {
+    margin-top: 32px;
+  }
+`;
+export function StyledEditorContent({ ref = undefined, children, ...rest }) {
+    return (_jsxs(StyledEditorWrapper, { ref: ref, ...rest, children: [_jsx(EditorGlobalStyle, {}), children] }));
+}
+function EditorGlobalStyle() {
+    const theme = useTheme();
+    return (_jsx(GlobalStyles, { styles: {
+            '.dropdown': {
+                border: `1px solid ${theme.palette.divider}`,
+                backgroundColor: theme.palette.background.default,
+                '.item': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    /* fix: safari dropdown menu item 右侧溢出问题 */
+                    width: '-webkit-fill-available',
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.default,
+                    '.iconify': {
+                        flexShrink: 0,
+                        fontSize: '1.4em',
+                    },
+                    '&:hover': {
+                        backgroundColor: theme.palette.action.hover,
+                    },
+                },
+                hr: {
+                    height: 0,
+                    border: 'none',
+                    borderTop: `1px solid ${theme.palette.divider}`,
+                },
+            },
+        } }));
+}

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

@@ -0,0 +1,32 @@
+declare const codeHighlight: {
+    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 default codeHighlight;

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

@@ -0,0 +1,58 @@
+import { css } from '@emotion/css';
+// Dark theme tokens
+const tokenComment = css `
+  color: var(--lexical-code-comment);
+`;
+const tokenPunctuation = css `
+  color: var(--lexical-code-punctuation);
+`;
+const tokenProperty = css `
+  color: var(--lexical-code-property);
+`;
+const tokenSelector = css `
+  color: var(--lexical-code-selector);
+`;
+const tokenOperator = css `
+  color: var(--lexical-code-operator);
+`;
+const tokenAttr = css `
+  color: var(--lexical-code-attr);
+`;
+const tokenVariable = css `
+  color: var(--lexical-code-variable);
+`;
+const tokenFunction = css `
+  color: var(--lexical-code-function);
+`;
+const codeHighlight = {
+    atrule: tokenAttr,
+    attr: tokenAttr,
+    boolean: tokenProperty,
+    builtin: tokenSelector,
+    cdata: tokenComment,
+    char: tokenSelector,
+    class: tokenFunction,
+    comment: tokenComment,
+    constant: tokenProperty,
+    deleted: tokenProperty,
+    doctype: tokenComment,
+    entity: tokenOperator,
+    function: tokenFunction,
+    important: tokenVariable,
+    inserted: tokenSelector,
+    keyword: tokenAttr,
+    namespace: tokenVariable,
+    number: tokenProperty,
+    operator: tokenOperator,
+    prolog: tokenComment,
+    property: tokenProperty,
+    punctuation: tokenPunctuation,
+    regex: tokenVariable,
+    selector: tokenSelector,
+    string: tokenSelector,
+    symbol: tokenProperty,
+    tag: tokenProperty,
+    url: tokenOperator,
+    variable: tokenVariable,
+};
+export default codeHighlight;

package/lib/main/themes/customTheme.d.ts

@@ -0,0 +1,2 @@
+import { EditorThemeClasses } from 'lexical';
+export declare const useCustomTheme: () => EditorThemeClasses;

package/lib/main/themes/customTheme.js

@@ -0,0 +1,324 @@
+import { css } from '@emotion/css';
+import { useTheme } from '@mui/material';
+import defaultTheme from './defaultTheme';
+import codeHighlight from './code-highlight';
+import { isHeadFontTooTall, isBodyFontTooTall } from '../utils/guard';
+const createCustomTheme = (theme) => {
+    const noMarginTopStyle = css(`
+      // 首个元素的 margin-top 设置为 0 或者为 “超高” 字体预留一点空间
+      .be-editable &:first-child {
+        margin-top: ${isHeadFontTooTall || isBodyFontTooTall ? '2px' : '0'};
+      }
+    `);
+    const paragraph = css(
+    // use default theme's paragraph style
+    defaultTheme.paragraph, `
+      margin-bottom: 20px;
+      &:has(img) {
+        margin: 32px 0;
+        line-height: 1;
+      }
+      line-height: 1.75;
+    `, 
+    // 兼容旧 table 水平滚动条问题 (与 useResponsiveTable 配合使用)
+    `
+      &:has(table) {
+        overflow-x: auto;
+        // scroll bar and table gap
+        padding-bottom: 0.628em;
+      }
+    `, theme.typography.body1, noMarginTopStyle);
+    const quote = css(`
+      margin: 1.6em 0;
+      border-left-color: var(--mui-palette-grey-200);
+      border-left-width: 2px;
+      border-left-style: solid;
+      padding-left: 1.5rem;
+      font-style: italic;
+    `, theme.typography.body1, { fontWeight: 500 });
+    const h1 = css(`
+      margin: 0;
+      margin-bottom: 0.833333em;
+      & + * {
+        margin-top: 0!important;
+      }
+    `, theme.typography.h1);
+    const h2 = css(`
+      margin: 2em 0 0.6666em 0;
+      & + * {
+        margin-top: 0!important;
+      }
+    `, theme.typography.h2, noMarginTopStyle);
+    const h3 = css(`
+      margin: 2.4em 0 0.6em 0;
+      & + * {
+        margin-top: 0!important;
+      }
+    `, theme.typography.h3, noMarginTopStyle);
+    const h4 = css(`
+      margin: 2em 0 0.5em 0;
+      & + * {
+        margin-top: 0!important;
+      }
+    `, theme.typography.h4, noMarginTopStyle);
+    const h5 = css(`
+      margin: 0;
+      & + * {
+        margin-top: 0!important;
+      }
+    `, theme.typography.h5, noMarginTopStyle);
+    const h6 = css(`
+      margin: 0;
+      & + * {
+        margin-top: 0!important;
+      }
+    `, theme.typography.h6, noMarginTopStyle);
+    const link = css(`
+      color: inherit;
+      text-decoration: none;
+      border-bottom: 1px solid var(--mui-palette-primary-main);
+      &:hover {
+        border-bottom-width: 2px;
+      }
+    `, { fontWeight: 600 });
+    const textBold = css `
+    font-weight: bold;
+  `;
+    const textItalic = css `
+    font-style: italic;
+  `;
+    const textUnderline = css `
+    text-decoration: underline;
+  `;
+    const textStrikethrough = css `
+    text-decoration: line-through;
+  `;
+    const textUnderlineStrikethrough = css `
+    text-decoration: underline line-through;
+  `;
+    const textSubscript = css `
+    font-size: 0.8em;
+    vertical-align: sub !important;
+  `;
+    const textSuperscript = css `
+    font-size: 0.8em;
+    vertical-align: super;
+  `;
+    const textCode = css(theme.typography.body1, {
+        fontSize: '.875em',
+        fontWeight: 500,
+        borderRadius: '.25rem',
+        border: '1px solid var(--mui-palette-grey-200)',
+        padding: '1px .375rem',
+        fontFamily: 'Menlo, Consolas, Monaco, monospace',
+        fontVariantLigatures: 'none',
+        backgroundColor: 'var(--mui-palette-grey-50)',
+        color: 'var(--lexical-text-code)',
+    });
+    const olCommon = {
+        margin: 0,
+        padding: 0,
+        ...theme.typography.body1,
+    };
+    const ol1 = css(`
+      margin: '1.3333333em 0';
+    `, olCommon);
+    const ol2 = css(`
+      list-style-type: upper-alpha;
+    `, olCommon);
+    const ol3 = css(`
+      list-style-type: lower-alpha;
+    `, olCommon);
+    const ol4 = css(`
+      list-style-type: upper-roman;
+    `, olCommon);
+    const ol5 = css(`
+      list-style-type: lower-roman;
+    `, olCommon);
+    const ul = css `
+    padding: 0;
+    margin: '1.3333333em 0';
+    & & {
+      margin: 0;
+    }
+  `;
+    const listItem = css(`
+      margin-left: 28px;
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+      padding-left: 0.25em;
+    `, theme.typography.body1
+    // { lineHeight: 1.5 }
+    );
+    const listItemChecked = css `
+    margin-left: 0 !important;
+    margin-right: 8px;
+    padding-left: 24px;
+    padding-right: 24px;
+    &:before {
+      border: 1px solid var(--mui-palette-primary-main);
+      background-color: var(--mui-palette-primary-main);
+      top: 4px;
+    }
+    &:after {
+      top: 7px;
+    }
+    &:focus:before {
+      box-shadow: 0 0 0 1px var(--mui-palette-primary-light);
+    }
+  `;
+    const listItemUnchecked = css `
+    margin-left: 0 !important;
+    margin-right: 8px;
+    padding-left: 24px;
+    padding-right: 24px;
+    &:before {
+      top: 4px;
+      left: 1px;
+    }
+    &:focus:before {
+      box-shadow: 0 0 0 1px var(--mui-palette-primary-light);
+    }
+  `;
+    const nestedListItem = css `
+    list-style-type: none;
+
+    &:before,
+    &:after {
+      display: none;
+    }
+  `;
+    const embedBlock = css `
+    user-select: none;
+    padding: 8px 0;
+  `;
+    const embedBlockFocus = css `
+    outline: 2px solid var(--mui-palette-primary-light);
+  `;
+    const alert = css `
+    // user-select: none;
+    padding: 8px 0;
+  `;
+    const alertFocus = css `
+    outline: 2px solid var(--mui-palette-primary-light);
+  `;
+    const xComponent = css `
+    padding: 8px 0;
+  `;
+    const xComponentFocus = css `
+    outline: 2px solid var(--mui-palette-primary-light);
+  `;
+    const image = css `
+    .image-caption-container {
+      // fix #924
+      .ImageNode__contentEditable {
+        box-sizing: content-box;
+      }
+
+      .ImageNode__contentEditable p {
+        margin: 0;
+      }
+
+      .be-content:not(.editable) & {
+        position: relative;
+        margin-top: 0.5em;
+
+        .ImageNode__contentEditable {
+          padding: 0;
+          p {
+            color: var(--mui-palette-text-secondary);
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  `;
+    const code = css `
+    background-color: var(--mui-palette-background-paper);
+    color: var(--mui-palette-text-primary);
+    font-family: Menlo, Consolas, Monaco, monospace;
+    display: block;
+    // padding: 16px;
+    padding: 16px 16px 16px 52px;
+    line-height: 1.53;
+    font-size: 13px;
+    margin: 0;
+    margin-top: 20px;
+    margin-bottom: 32px;
+    tab-size: 2;
+    /* white-space: pre; */
+    overflow-x: auto;
+    position: relative;
+    border-radius: ${theme.shape.borderRadius}px;
+    border: 1px solid var(--mui-palette-divider);
+
+    &:before {
+      content: attr(data-gutter);
+      position: absolute;
+      left: 0;
+      top: 0;
+      // border-right: 1px solid #ccc;
+      padding: 16px;
+      color: #777;
+      white-space: pre-wrap;
+      text-align: right;
+      min-width: 25px;
+    }
+    &[data-gutter='1'] {
+      padding: 12px 16px !important;
+    }
+    &[data-gutter='1']:before {
+      display: none;
+    }
+  `;
+    /**
+     * 基于 mui theme 的自定义主题
+     */
+    const customTheme = {
+        ...defaultTheme,
+        paragraph,
+        quote,
+        heading: { h1, h2, h3, h4, h5, h6 },
+        text: {
+            bold: textBold,
+            code: textCode,
+            italic: textItalic,
+            strikethrough: textStrikethrough,
+            subscript: textSubscript,
+            superscript: textSuperscript,
+            underline: textUnderline,
+            underlineStrikethrough: textUnderlineStrikethrough,
+        },
+        link,
+        list: {
+            listitem: listItem,
+            listitemChecked: `${defaultTheme.list.listitemChecked} ${listItemChecked}`,
+            listitemUnchecked: `${defaultTheme.list.listitemUnchecked} ${listItemUnchecked}`,
+            nested: {
+                listitem: nestedListItem,
+            },
+            olDepth: [ol1, ol2, ol3, ol4, ol5],
+            ul,
+        },
+        codeHighlight,
+        embedBlock: {
+            base: embedBlock,
+            focus: embedBlockFocus,
+        },
+        alert: {
+            base: alert,
+            focus: alertFocus,
+        },
+        xComponent: {
+            base: xComponent,
+            focus: xComponentFocus,
+        },
+        image: `${defaultTheme.image} ${image}`,
+        code,
+    };
+    return customTheme;
+};
+export const useCustomTheme = () => {
+    const muiTheme = useTheme();
+    return createCustomTheme(muiTheme);
+};

package/lib/main/themes/defaultTheme.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { EditorThemeClasses } from 'lexical';
+declare const defaultTheme: EditorThemeClasses;
+export default defaultTheme;