@blocklet/editor-lite 2.6.0

package/lib/main/themes/defaultTheme.js

@@ -0,0 +1,554 @@
+/**
+ * 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 { css } from '@emotion/css';
+import { tableClasses } from './table';
+const ltr = css `
+  text-align: left;
+`;
+const rtl = css `
+  text-align: right;
+`;
+const paragraph = css `
+  margin: 1em 0;
+  position: relative;
+`;
+const quote = css `
+  margin: 0;
+  margin-left: 0;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
+`;
+const h1 = css `
+  font-size: 2em;
+  color: rgb(5, 5, 5);
+  font-weight: 700;
+  margin: 0;
+  margin-top: 24px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+
+  @media (max-width: 768px) {
+    font-size: 1.5em;
+  }
+`;
+const h2 = css `
+  font-size: 1.5em;
+  font-weight: 700;
+  margin: 0;
+  margin-top: 24px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+
+  @media (max-width: 768px) {
+    font-size: 1.25em;
+  }
+`;
+const h3 = css `
+  font-size: 1.25em;
+  margin: 0;
+  margin-bottom: 16px;
+
+  @media (max-width: 768px) {
+    font-size: 1em;
+  }
+`;
+const h4 = css `
+  margin: 0;
+  margin-bottom: 16px;
+`;
+const h5 = css `
+  margin: 0;
+  margin-bottom: 16px;
+`;
+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 `
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+`;
+const hashtag = css `
+  background-color: rgba(88, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+`;
+const link = css `
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const code = css `
+  background-color: rgb(240, 242, 245);
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  tab-size: 2;
+  /* white-space: pre; */
+  overflow-x: auto;
+  position: relative;
+
+  &:before {
+    content: attr(data-gutter);
+    position: absolute;
+    background-color: #eee;
+    left: 0;
+    top: 0;
+    border-right: 1px solid #ccc;
+    padding: 8px;
+    color: #777;
+    white-space: pre-wrap;
+    text-align: right;
+    min-width: 25px;
+  }
+`;
+const characterLimit = css `
+  display: inline;
+  background-color: #ffbbbb !important;
+`;
+const ol1 = css `
+  padding: 0;
+  margin: 0;
+  /* margin-left: 16px; */
+`;
+const ol2 = css `
+  padding: 0;
+  margin: 0;
+  margin-left: 2em;
+  list-style-type: upper-alpha;
+`;
+const ol3 = css `
+  padding: 0;
+  margin: 0;
+  margin-left: 2em;
+  list-style-type: lower-alpha;
+`;
+const ol4 = css `
+  padding: 0;
+  margin: 0;
+  margin-left: 2em;
+  list-style-type: upper-roman;
+`;
+const ol5 = css `
+  padding: 0;
+  margin: 0;
+  margin-left: 2em;
+  list-style-type: lower-roman;
+`;
+const ul = css `
+  padding: 0;
+  margin: 10px 0;
+  & & {
+    margin: 0;
+  }
+`;
+const listItem = css `
+  margin-left: 24px;
+`;
+const listItemUnchecked = css `
+  position: relative;
+  margin-left: 0;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+
+  &:before {
+    content: '';
+    width: 16px;
+    height: 16px;
+    top: 6px;
+    left: 0;
+    cursor: pointer;
+    display: block;
+    background-size: cover;
+    position: absolute;
+    border: 1px solid #999;
+    border-radius: 2px;
+  }
+
+  .blocklet-editor-busy &:before {
+    border: 0;
+    background-color: #ddd;
+  }
+
+  &[dir='rtl']:before {
+    left: auto;
+    right: 0;
+  }
+
+  &:focus:before {
+    box-shadow: 0 0 0 2px #a6cdfe;
+    border-radius: 2px;
+  }
+`;
+const listItemChecked = css `
+  position: relative;
+  margin-left: 0;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+
+  &:before {
+    content: '';
+    width: 16px;
+    height: 16px;
+    top: 6px;
+    left: 0;
+    cursor: pointer;
+    display: block;
+    background-size: cover;
+    position: absolute;
+    border: 1px solid rgb(61, 135, 245);
+    border-radius: 2px;
+    background-color: #3d87f5;
+    background-repeat: no-repeat;
+  }
+
+  .blocklet-editor-busy &:before {
+    border: 0;
+    background-color: #ddd;
+  }
+
+  &[dir='rtl']:before {
+    left: auto;
+    right: 0;
+  }
+
+  &:focus:before {
+    box-shadow: 0 0 0 2px #a6cdfe;
+    border-radius: 2px;
+  }
+
+  &:after {
+    content: '';
+    cursor: pointer;
+    border-color: #fff;
+    border-style: solid;
+    position: absolute;
+    display: block;
+    top: 9px;
+    width: 4px;
+    left: 6px;
+    height: 9px;
+    transform: rotate(45deg);
+    border-width: 0 2px 2px 0;
+  }
+`;
+const nestedListItem = css `
+  list-style-type: none;
+
+  &:before,
+  &:after {
+    display: none;
+  }
+`;
+const tokenComment = css `
+  color: #6a9955;
+`;
+const tokenPunctuation = css `
+  color: #d4d4d4;
+`;
+const tokenProperty = css `
+  color: #9cdcfe;
+`;
+const tokenSelector = css `
+  color: #d7ba7d;
+`;
+const tokenOperator = css `
+  color: #d4d4d4;
+`;
+const tokenAttr = css `
+  color: #9cdcfe;
+`;
+const tokenVariable = css `
+  color: #9cdcfe;
+`;
+const tokenFunction = css `
+  color: #dcdcaa;
+`;
+const mark = css `
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+
+  &.selected {
+    background: rgba(255, 212, 0, 0.5);
+    border-bottom: 2px solid rgba(255, 212, 0, 1);
+  }
+`;
+const markOverlap = css `
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+
+  &.selected {
+    background: rgba(255, 212, 0, 0.7);
+    border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+  }
+`;
+const embedBlock = css `
+  user-select: none;
+  padding: 8px 0;
+`;
+const embedBlockFocus = css `
+  outline: 2px solid rgb(60, 132, 244);
+`;
+const alert = css `
+  // user-select: none;
+  padding: 8px 0;
+`;
+const alertFocus = css `
+  outline: 2px solid rgb(60, 132, 244);
+`;
+const image = css `
+  cursor: default;
+  display: inline-block;
+  position: relative;
+  user-select: none;
+
+  img {
+    max-width: 100% !important;
+    height: inherit !important;
+    cursor: default;
+
+    &.focused {
+      outline: 2px solid rgb(60, 132, 244);
+      user-select: none;
+
+      &.draggable {
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    }
+  }
+
+  .image-caption-container {
+    display: block;
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+
+    background-color: rgba(255, 255, 255, 0.9);
+    min-width: 100px;
+    color: #000;
+    overflow: hidden;
+
+    .tree-view-output {
+      margin: 0;
+      border-radius: 0;
+    }
+
+    // fix #924
+    .ImageNode__contentEditable {
+      box-sizing: content-box;
+    }
+  }
+
+  .image-caption-button {
+    display: block;
+    position: absolute;
+    height: 40px;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 30%;
+    padding: 10px;
+    margin: auto;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+    min-width: 100px;
+    color: #fff;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background-color: rgba(60, 132, 244, 0.5);
+    }
+  }
+
+  .image-resizer {
+    display: block;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    background-color: rgb(60, 132, 244);
+    border: 1px solid #fff;
+
+    &.image-resizer-n {
+      top: -6px;
+      left: 48%;
+      cursor: n-resize;
+    }
+
+    &.image-resizer-ne {
+      top: -6px;
+      right: -6px;
+      cursor: ne-resize;
+    }
+
+    &.image-resizer-e {
+      bottom: 48%;
+      right: -6px;
+      cursor: e-resize;
+    }
+
+    &.image-resizer-se {
+      bottom: -2px;
+      right: -6px;
+      cursor: nwse-resize;
+    }
+
+    &.image-resizer-s {
+      bottom: -2px;
+      left: 48%;
+      cursor: s-resize;
+    }
+
+    &.image-resizer-sw {
+      bottom: -2px;
+      left: -6px;
+      cursor: sw-resize;
+    }
+
+    &.image-resizer-w {
+      bottom: 48%;
+      left: -6px;
+      cursor: w-resize;
+    }
+
+    &.image-resizer-nw {
+      top: -6px;
+      left: -6px;
+      cursor: nw-resize;
+    }
+  }
+`;
+const responsiveContainer = css `
+  display: block;
+  max-width: 100%;
+`;
+const defaultTheme = {
+    ltr,
+    rtl,
+    paragraph,
+    quote,
+    heading: { h1, h2, h3, h4, h5 },
+    text: {
+        bold: textBold,
+        code: textCode,
+        italic: textItalic,
+        strikethrough: textStrikethrough,
+        subscript: textSubscript,
+        superscript: textSuperscript,
+        underline: textUnderline,
+        underlineStrikethrough: textUnderlineStrikethrough,
+    },
+    hashtag,
+    link,
+    code,
+    ...tableClasses,
+    characterLimit,
+    list: {
+        listitem: listItem,
+        listitemChecked: listItemChecked,
+        listitemUnchecked: listItemUnchecked,
+        nested: {
+            listitem: nestedListItem,
+        },
+        olDepth: [ol1, ol2, ol3, ol4, ol5],
+        ul,
+    },
+    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,
+    },
+    embedBlock: {
+        base: embedBlock,
+        focus: embedBlockFocus,
+    },
+    alert: {
+        base: alert,
+        focus: alertFocus,
+    },
+    image,
+    mark,
+    markOverlap,
+    responsiveContainer,
+};
+export default defaultTheme;

package/lib/main/themes/table/index.d.ts

@@ -0,0 +1,3 @@
+import { EditorThemeClasses } from 'lexical';
+import './table.css';
+export declare const tableClasses: EditorThemeClasses;

package/lib/main/themes/table/index.js

@@ -0,0 +1,20 @@
+import './table.css';
+export const tableClasses = {
+    table: 'PlaygroundEditorTheme__table',
+    tableAddColumns: 'PlaygroundEditorTheme__tableAddColumns',
+    tableAddRows: 'PlaygroundEditorTheme__tableAddRows',
+    center: 'PlaygroundEditorTheme__tableAlignmentCenter',
+    right: 'PlaygroundEditorTheme__tableAlignmentRight',
+    tableCell: 'PlaygroundEditorTheme__tableCell',
+    tableCellActionButton: 'PlaygroundEditorTheme__tableCellActionButton',
+    tableCellActionButtonContainer: 'PlaygroundEditorTheme__tableCellActionButtonContainer',
+    tableCellHeader: 'PlaygroundEditorTheme__tableCellHeader',
+    tableCellResizer: 'PlaygroundEditorTheme__tableCellResizer',
+    tableCellSelected: 'PlaygroundEditorTheme__tableCellSelected',
+    tableFrozenColumn: 'PlaygroundEditorTheme__tableFrozenColumn',
+    tableFrozenRow: 'PlaygroundEditorTheme__tableFrozenRow',
+    tableRowStriping: 'PlaygroundEditorTheme__tableRowStriping',
+    tableScrollableWrapper: 'PlaygroundEditorTheme__tableScrollableWrapper',
+    tableSelected: 'PlaygroundEditorTheme__tableSelected',
+    tableSelection: 'PlaygroundEditorTheme__tableSelection',
+};