@eventuras/scribo 0.8.2 → 0.10.7

package/src/themes/EditorTheme.css

@@ -6,20 +6,20 @@
  *
  *
  */
-.PlaygroundEditorTheme__ltr {
+.EditorTheme__ltr {
   text-align: left;
 }
 
-.PlaygroundEditorTheme__rtl {
+.EditorTheme__rtl {
   text-align: right;
 }
 
-.PlaygroundEditorTheme__paragraph {
+.EditorTheme__paragraph {
   margin: 0;
   position: relative;
 }
 
-.PlaygroundEditorTheme__quote {
+.EditorTheme__quote {
   margin: 0;
   margin-left: 20px;
   margin-bottom: 10px;
@@ -31,7 +31,7 @@
   padding-left: 16px;
 }
 
-.PlaygroundEditorTheme__h1 {
+.EditorTheme__h1 {
   font-size: 32px;
   line-height: 1.3;
   padding-top: 2rem;
@@ -41,7 +41,12 @@
   margin: 0;
 }
 
-.PlaygroundEditorTheme__h2 {
+[data-theme="dark"] .EditorTheme__h1,
+[data-color-scheme="dark"] .EditorTheme__h1 {
+  color: #ffffff;
+}
+
+.EditorTheme__h2 {
   font-size: 24px;
   color: #406280;
   padding-top: 2rem;
@@ -50,7 +55,12 @@
   margin: 0;
 }
 
-.PlaygroundEditorTheme__h3 {
+[data-theme="dark"] .EditorTheme__h2,
+[data-color-scheme="dark"] .EditorTheme__h2 {
+  color: #ffffff;
+}
+
+.EditorTheme__h3 {
   font-size: 24px;
   color: #406280;
   padding-top: 2rem;
@@ -59,7 +69,12 @@
   margin: 0;
 }
 
-.PlaygroundEditorTheme__h4 {
+[data-theme="dark"] .EditorTheme__h3,
+[data-color-scheme="dark"] .EditorTheme__h3 {
+  color: #ffffff;
+}
+
+.EditorTheme__h4 {
   font-size: 16px;
   color: #406280;
   padding-top: 1.5rem;
@@ -68,63 +83,68 @@
   margin: 0;
 }
 
-.PlaygroundEditorTheme__indent {
+[data-theme="dark"] .EditorTheme__h4,
+[data-color-scheme="dark"] .EditorTheme__h4 {
+  color: #ffffff;
+}
+
+.EditorTheme__indent {
   --lexical-indent-base-value: 40px;
 }
 
-.PlaygroundEditorTheme__textBold {
+.EditorTheme__textBold {
   font-weight: bold;
 }
 
-.PlaygroundEditorTheme__textItalic {
+.EditorTheme__textItalic {
   font-style: italic;
 }
 
-.PlaygroundEditorTheme__textUnderline {
+.EditorTheme__textUnderline {
   text-decoration: underline;
 }
 
-.PlaygroundEditorTheme__textStrikethrough {
+.EditorTheme__textStrikethrough {
   text-decoration: line-through;
 }
 
-.PlaygroundEditorTheme__textUnderlineStrikethrough {
+.EditorTheme__textUnderlineStrikethrough {
   text-decoration: underline line-through;
 }
 
-.PlaygroundEditorTheme__textSubscript {
+.EditorTheme__textSubscript {
   font-size: 0.8em;
   vertical-align: sub !important;
 }
 
-.PlaygroundEditorTheme__textSuperscript {
+.EditorTheme__textSuperscript {
   font-size: 0.8em;
   vertical-align: super;
 }
 
-.PlaygroundEditorTheme__textCode {
+.EditorTheme__textCode {
   background-color: rgb(240, 242, 245);
   padding: 1px 0.25rem;
   font-family: Menlo, Consolas, Monaco, monospace;
   font-size: 94%;
 }
 
-.PlaygroundEditorTheme__hashtag {
+.EditorTheme__hashtag {
   background-color: rgba(88, 144, 255, 0.15);
   border-bottom: 1px solid rgba(88, 144, 255, 0.3);
 }
 
-.PlaygroundEditorTheme__link {
+.EditorTheme__link {
   color: rgb(33, 111, 219);
   text-decoration: none;
 }
 
-.PlaygroundEditorTheme__link:hover {
+.EditorTheme__link:hover {
   text-decoration: underline;
   cursor: pointer;
 }
 
-.PlaygroundEditorTheme__code {
+.EditorTheme__code {
   background-color: rgb(240, 242, 245);
   font-family: Menlo, Consolas, Monaco, monospace;
   display: block;
@@ -139,7 +159,7 @@
   tab-size: 2;
 }
 
-.PlaygroundEditorTheme__code:before {
+.EditorTheme__code:before {
   content: attr(data-gutter);
   position: absolute;
   background-color: #eee;
@@ -147,63 +167,63 @@
   top: 0;
   border-right: 1px solid #ccc;
   padding: 8px;
-  color: #777;
+  color: #696969;
   white-space: pre-wrap;
   text-align: right;
   min-width: 25px;
 }
 
-.PlaygroundEditorTheme__characterLimit {
+.EditorTheme__characterLimit {
   display: inline;
   background-color: #ffbbbb !important;
 }
 
-.PlaygroundEditorTheme__ol1 {
+.EditorTheme__ol1 {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ol2 {
+.EditorTheme__ol2 {
   padding: 0;
   margin: 0;
   list-style-type: upper-alpha;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ol3 {
+.EditorTheme__ol3 {
   padding: 0;
   margin: 0;
   list-style-type: lower-alpha;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ol4 {
+.EditorTheme__ol4 {
   padding: 0;
   margin: 0;
   list-style-type: upper-roman;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ol5 {
+.EditorTheme__ol5 {
   padding: 0;
   margin: 0;
   list-style-type: lower-roman;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ul {
+.EditorTheme__ul {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__listItem {
+.EditorTheme__listItem {
   margin: 0 32px;
 }
 
-.PlaygroundEditorTheme__listItemChecked,
-.PlaygroundEditorTheme__listItemUnchecked {
+.EditorTheme__listItemChecked,
+.EditorTheme__listItemUnchecked {
   position: relative;
   margin-left: 8px;
   margin-right: 8px;
@@ -213,12 +233,12 @@
   outline: none;
 }
 
-.PlaygroundEditorTheme__listItemChecked {
+.EditorTheme__listItemChecked {
   text-decoration: line-through;
 }
 
-.PlaygroundEditorTheme__listItemUnchecked:before,
-.PlaygroundEditorTheme__listItemChecked:before {
+.EditorTheme__listItemUnchecked:before,
+.EditorTheme__listItemChecked:before {
   content: "";
   width: 16px;
   height: 16px;
@@ -230,31 +250,31 @@
   position: absolute;
 }
 
-.PlaygroundEditorTheme__listItemUnchecked[dir="rtl"]:before,
-.PlaygroundEditorTheme__listItemChecked[dir="rtl"]:before {
+.EditorTheme__listItemUnchecked[dir="rtl"]:before,
+.EditorTheme__listItemChecked[dir="rtl"]:before {
   left: auto;
   right: 0;
 }
 
-.PlaygroundEditorTheme__listItemUnchecked:focus:before,
-.PlaygroundEditorTheme__listItemChecked:focus:before {
+.EditorTheme__listItemUnchecked:focus:before,
+.EditorTheme__listItemChecked:focus:before {
   box-shadow: 0 0 0 2px #a6cdfe;
   border-radius: 2px;
 }
 
-.PlaygroundEditorTheme__listItemUnchecked:before {
+.EditorTheme__listItemUnchecked:before {
   border: 1px solid #999;
   border-radius: 2px;
 }
 
-.PlaygroundEditorTheme__listItemChecked:before {
+.EditorTheme__listItemChecked:before {
   border: 1px solid rgb(61, 135, 245);
   border-radius: 2px;
   background-color: #3d87f5;
   background-repeat: no-repeat;
 }
 
-.PlaygroundEditorTheme__listItemChecked:after {
+.EditorTheme__listItemChecked:after {
   content: "";
   cursor: pointer;
   border-color: #fff;
@@ -270,83 +290,83 @@
   border-width: 0 2px 2px 0;
 }
 
-.PlaygroundEditorTheme__nestedListItem {
+.EditorTheme__nestedListItem {
   list-style-type: none;
 }
 
-.PlaygroundEditorTheme__nestedListItem:before,
-.PlaygroundEditorTheme__nestedListItem:after {
+.EditorTheme__nestedListItem:before,
+.EditorTheme__nestedListItem:after {
   display: none;
 }
 
-.PlaygroundEditorTheme__tokenComment {
+.EditorTheme__tokenComment {
   color: slategray;
 }
 
-.PlaygroundEditorTheme__tokenPunctuation {
+.EditorTheme__tokenPunctuation {
   color: #999;
 }
 
-.PlaygroundEditorTheme__tokenProperty {
+.EditorTheme__tokenProperty {
   color: #905;
 }
 
-.PlaygroundEditorTheme__tokenSelector {
+.EditorTheme__tokenSelector {
   color: #690;
 }
 
-.PlaygroundEditorTheme__tokenOperator {
+.EditorTheme__tokenOperator {
   color: #9a6e3a;
 }
 
-.PlaygroundEditorTheme__tokenAttr {
+.EditorTheme__tokenAttr {
   color: #07a;
 }
 
-.PlaygroundEditorTheme__tokenVariable {
+.EditorTheme__tokenVariable {
   color: #e90;
 }
 
-.PlaygroundEditorTheme__tokenFunction {
+.EditorTheme__tokenFunction {
   color: #dd4a68;
 }
 
-.PlaygroundEditorTheme__mark {
+.EditorTheme__mark {
   background: rgba(255, 212, 0, 0.14);
   border-bottom: 2px solid rgba(255, 212, 0, 0.3);
   padding-bottom: 2px;
 }
 
-.PlaygroundEditorTheme__markOverlap {
+.EditorTheme__markOverlap {
   background: rgba(255, 212, 0, 0.3);
   border-bottom: 2px solid rgba(255, 212, 0, 0.7);
 }
 
-.PlaygroundEditorTheme__mark.selected {
+.EditorTheme__mark.selected {
   background: rgba(255, 212, 0, 0.5);
   border-bottom: 2px solid rgba(255, 212, 0, 1);
 }
 
-.PlaygroundEditorTheme__markOverlap.selected {
+.EditorTheme__markOverlap.selected {
   background: rgba(255, 212, 0, 0.7);
   border-bottom: 2px solid rgba(255, 212, 0, 0.7);
 }
 
-.PlaygroundEditorTheme__embedBlock {
+.EditorTheme__embedBlock {
   user-select: none;
 }
 
-.PlaygroundEditorTheme__embedBlockFocus {
+.EditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }
 
-.PlaygroundEditorTheme__layoutContaner {
+.EditorTheme__layoutContaner {
   display: grid;
   gap: 10px;
   margin: 10px 0;
 }
 
-.PlaygroundEditorTheme__layoutItem {
+.EditorTheme__layoutItem {
   border: 1px dashed #ddd;
   padding: 8px 16px;
 }

package/src/themes/EditorTheme.ts

@@ -6,112 +6,111 @@
  *
  */
 
-import "./EditorTheme.css";
+import './EditorTheme.css';
 
-import type { EditorThemeClasses } from "lexical";
+import type { EditorThemeClasses } from 'lexical';
 
 const theme: EditorThemeClasses = {
-  blockCursor: "PlaygroundEditorTheme__blockCursor",
-  characterLimit: "PlaygroundEditorTheme__characterLimit",
-  code: "PlaygroundEditorTheme__code",
+  blockCursor: 'EditorTheme__blockCursor',
+  characterLimit: 'EditorTheme__characterLimit',
+  code: 'EditorTheme__code',
   codeHighlight: {
-    atrule: "PlaygroundEditorTheme__tokenAttr",
-    attr: "PlaygroundEditorTheme__tokenAttr",
-    boolean: "PlaygroundEditorTheme__tokenProperty",
-    builtin: "PlaygroundEditorTheme__tokenSelector",
-    cdata: "PlaygroundEditorTheme__tokenComment",
-    char: "PlaygroundEditorTheme__tokenSelector",
-    class: "PlaygroundEditorTheme__tokenFunction",
-    "class-name": "PlaygroundEditorTheme__tokenFunction",
-    comment: "PlaygroundEditorTheme__tokenComment",
-    constant: "PlaygroundEditorTheme__tokenProperty",
-    deleted: "PlaygroundEditorTheme__tokenProperty",
-    doctype: "PlaygroundEditorTheme__tokenComment",
-    entity: "PlaygroundEditorTheme__tokenOperator",
-    function: "PlaygroundEditorTheme__tokenFunction",
-    important: "PlaygroundEditorTheme__tokenVariable",
-    inserted: "PlaygroundEditorTheme__tokenSelector",
-    keyword: "PlaygroundEditorTheme__tokenAttr",
-    namespace: "PlaygroundEditorTheme__tokenVariable",
-    number: "PlaygroundEditorTheme__tokenProperty",
-    operator: "PlaygroundEditorTheme__tokenOperator",
-    prolog: "PlaygroundEditorTheme__tokenComment",
-    property: "PlaygroundEditorTheme__tokenProperty",
-    punctuation: "PlaygroundEditorTheme__tokenPunctuation",
-    regex: "PlaygroundEditorTheme__tokenVariable",
-    selector: "PlaygroundEditorTheme__tokenSelector",
-    string: "PlaygroundEditorTheme__tokenSelector",
-    symbol: "PlaygroundEditorTheme__tokenProperty",
-    tag: "PlaygroundEditorTheme__tokenProperty",
-    url: "PlaygroundEditorTheme__tokenOperator",
-    variable: "PlaygroundEditorTheme__tokenVariable",
+    atrule: 'EditorTheme__tokenAttr',
+    attr: 'EditorTheme__tokenAttr',
+    boolean: 'EditorTheme__tokenProperty',
+    builtin: 'EditorTheme__tokenSelector',
+    cdata: 'EditorTheme__tokenComment',
+    char: 'EditorTheme__tokenSelector',
+    class: 'EditorTheme__tokenFunction',
+    'class-name': 'EditorTheme__tokenFunction',
+    comment: 'EditorTheme__tokenComment',
+    constant: 'EditorTheme__tokenProperty',
+    deleted: 'EditorTheme__tokenProperty',
+    doctype: 'EditorTheme__tokenComment',
+    entity: 'EditorTheme__tokenOperator',
+    function: 'EditorTheme__tokenFunction',
+    important: 'EditorTheme__tokenVariable',
+    inserted: 'EditorTheme__tokenSelector',
+    keyword: 'EditorTheme__tokenAttr',
+    namespace: 'EditorTheme__tokenVariable',
+    number: 'EditorTheme__tokenProperty',
+    operator: 'EditorTheme__tokenOperator',
+    prolog: 'EditorTheme__tokenComment',
+    property: 'EditorTheme__tokenProperty',
+    punctuation: 'EditorTheme__tokenPunctuation',
+    regex: 'EditorTheme__tokenVariable',
+    selector: 'EditorTheme__tokenSelector',
+    string: 'EditorTheme__tokenSelector',
+    symbol: 'EditorTheme__tokenProperty',
+    tag: 'EditorTheme__tokenProperty',
+    url: 'EditorTheme__tokenOperator',
+    variable: 'EditorTheme__tokenVariable',
   },
   embedBlock: {
-    base: "PlaygroundEditorTheme__embedBlock",
-    focus: "PlaygroundEditorTheme__embedBlockFocus",
+    base: 'EditorTheme__embedBlock',
+    focus: 'EditorTheme__embedBlockFocus',
   },
-  hashtag: "PlaygroundEditorTheme__hashtag",
+  hashtag: 'EditorTheme__hashtag',
   heading: {
-    h1: "PlaygroundEditorTheme__h1",
-    h2: "PlaygroundEditorTheme__h2",
-    h3: "PlaygroundEditorTheme__h3",
-    h4: "PlaygroundEditorTheme__h4",
-    h5: "PlaygroundEditorTheme__h5",
-    h6: "PlaygroundEditorTheme__h6",
+    h1: 'EditorTheme__h1',
+    h2: 'EditorTheme__h2',
+    h3: 'EditorTheme__h3',
+    h4: 'EditorTheme__h4',
+    h5: 'EditorTheme__h5',
+    h6: 'EditorTheme__h6',
   },
-  image: "editor-image",
-  indent: "PlaygroundEditorTheme__indent",
-  inlineImage: "inline-editor-image",
-  layoutContainer: "PlaygroundEditorTheme__layoutContaner",
-  layoutItem: "PlaygroundEditorTheme__layoutItem",
-  link: "PlaygroundEditorTheme__link",
+  image: 'editor-image',
+  indent: 'EditorTheme__indent',
+  inlineImage: 'inline-editor-image',
+  layoutContainer: 'EditorTheme__layoutContaner',
+  layoutItem: 'EditorTheme__layoutItem',
+  link: 'EditorTheme__link',
   list: {
-    listitem: "PlaygroundEditorTheme__listItem",
-    listitemChecked: "PlaygroundEditorTheme__listItemChecked",
-    listitemUnchecked: "PlaygroundEditorTheme__listItemUnchecked",
+    listitem: 'EditorTheme__listItem',
+    listitemChecked: 'EditorTheme__listItemChecked',
+    listitemUnchecked: 'EditorTheme__listItemUnchecked',
     nested: {
-      listitem: "PlaygroundEditorTheme__nestedListItem",
+      listitem: 'EditorTheme__nestedListItem',
     },
     olDepth: [
-      "PlaygroundEditorTheme__ol1",
-      "PlaygroundEditorTheme__ol2",
-      "PlaygroundEditorTheme__ol3",
-      "PlaygroundEditorTheme__ol4",
-      "PlaygroundEditorTheme__ol5",
+      'EditorTheme__ol1',
+      'EditorTheme__ol2',
+      'EditorTheme__ol3',
+      'EditorTheme__ol4',
+      'EditorTheme__ol5',
     ],
-    ul: "PlaygroundEditorTheme__ul",
+    ul: 'EditorTheme__ul',
   },
-  ltr: "PlaygroundEditorTheme__ltr",
-  mark: "PlaygroundEditorTheme__mark",
-  markOverlap: "PlaygroundEditorTheme__markOverlap",
-  paragraph: "PlaygroundEditorTheme__paragraph",
-  quote: "PlaygroundEditorTheme__quote",
-  rtl: "PlaygroundEditorTheme__rtl",
-  table: "PlaygroundEditorTheme__table",
-  tableAddColumns: "PlaygroundEditorTheme__tableAddColumns",
-  tableAddRows: "PlaygroundEditorTheme__tableAddRows",
-  tableCell: "PlaygroundEditorTheme__tableCell",
-  tableCellActionButton: "PlaygroundEditorTheme__tableCellActionButton",
-  tableCellActionButtonContainer:
-    "PlaygroundEditorTheme__tableCellActionButtonContainer",
-  tableCellEditing: "PlaygroundEditorTheme__tableCellEditing",
-  tableCellHeader: "PlaygroundEditorTheme__tableCellHeader",
-  tableCellPrimarySelected: "PlaygroundEditorTheme__tableCellPrimarySelected",
-  tableCellResizer: "PlaygroundEditorTheme__tableCellResizer",
-  tableCellSelected: "PlaygroundEditorTheme__tableCellSelected",
-  tableCellSortedIndicator: "PlaygroundEditorTheme__tableCellSortedIndicator",
-  tableResizeRuler: "PlaygroundEditorTheme__tableCellResizeRuler",
-  tableSelected: "PlaygroundEditorTheme__tableSelected",
-  tableSelection: "PlaygroundEditorTheme__tableSelection",
+  ltr: 'EditorTheme__ltr',
+  mark: 'EditorTheme__mark',
+  markOverlap: 'EditorTheme__markOverlap',
+  paragraph: 'EditorTheme__paragraph',
+  quote: 'EditorTheme__quote',
+  rtl: 'EditorTheme__rtl',
+  table: 'EditorTheme__table',
+  tableAddColumns: 'EditorTheme__tableAddColumns',
+  tableAddRows: 'EditorTheme__tableAddRows',
+  tableCell: 'EditorTheme__tableCell',
+  tableCellActionButton: 'EditorTheme__tableCellActionButton',
+  tableCellActionButtonContainer: 'EditorTheme__tableCellActionButtonContainer',
+  tableCellEditing: 'EditorTheme__tableCellEditing',
+  tableCellHeader: 'EditorTheme__tableCellHeader',
+  tableCellPrimarySelected: 'EditorTheme__tableCellPrimarySelected',
+  tableCellResizer: 'EditorTheme__tableCellResizer',
+  tableCellSelected: 'EditorTheme__tableCellSelected',
+  tableCellSortedIndicator: 'EditorTheme__tableCellSortedIndicator',
+  tableResizeRuler: 'EditorTheme__tableCellResizeRuler',
+  tableSelected: 'EditorTheme__tableSelected',
+  tableSelection: 'EditorTheme__tableSelection',
   text: {
-    bold: "PlaygroundEditorTheme__textBold",
-    code: "PlaygroundEditorTheme__textCode",
-    italic: "PlaygroundEditorTheme__textItalic",
-    strikethrough: "PlaygroundEditorTheme__textStrikethrough",
-    subscript: "PlaygroundEditorTheme__textSubscript",
-    superscript: "PlaygroundEditorTheme__textSuperscript",
-    underline: "PlaygroundEditorTheme__textUnderline",
-    underlineStrikethrough: "PlaygroundEditorTheme__textUnderlineStrikethrough",
+    bold: 'EditorTheme__textBold',
+    code: 'EditorTheme__textCode',
+    italic: 'EditorTheme__textItalic',
+    strikethrough: 'EditorTheme__textStrikethrough',
+    subscript: 'EditorTheme__textSubscript',
+    superscript: 'EditorTheme__textSuperscript',
+    underline: 'EditorTheme__textUnderline',
+    underlineStrikethrough: 'EditorTheme__textUnderlineStrikethrough',
   },
 };
 

package/src/types.ts

@@ -0,0 +1,27 @@
+import type { Transformer } from '@lexical/markdown';
+import type { Klass, LexicalNode } from 'lexical';
+import type { ComponentType } from 'react';
+
+export interface ScriboToolbarButton {
+  /** Unique key */
+  key: string;
+  /** Tooltip / aria-label */
+  label: string;
+  /** CSS class for the icon */
+  iconClass?: string;
+  /** Called when the button is clicked */
+  onSelect: (editor: import('lexical').LexicalEditor) => void;
+}
+
+export interface ScriboPlugin {
+  /** Unique name for the plugin */
+  name: string;
+  /** Lexical nodes to register */
+  nodes?: Klass<LexicalNode>[];
+  /** Markdown transformers (placed before built-in transformers) */
+  transformers?: Transformer[];
+  /** Buttons to add to the toolbar */
+  toolbarButtons?: ScriboToolbarButton[];
+  /** React components to render inside the LexicalComposer (must accept no props) */
+  editorPlugins?: ComponentType<object>[];
+}

package/src/ui/ContentEditable.tsx

@@ -6,16 +6,16 @@
  *
  */
 import type { JSX } from 'react';
-import "./ContentEditable.css";
+import './ContentEditable.css';
 
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 
 export default function LexicalContentEditable({
   className,
   id,
-}: {
+}: Readonly<{
   className?: string;
   id?: string;
-}): JSX.Element {
-  return <ContentEditable className={className || "ContentEditable__root"} id={id} />;
+}>): JSX.Element {
+  return <ContentEditable className={className || 'ContentEditable__root'} id={id} />;
 }