@scottjgilbert/lexical-blog-editor 0.1.4 → 1.0.0-beta.2

package/build/plugins/YouTubePlugin/index.js

@@ -1,21 +1,15 @@
-/**
- * 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 { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $insertNodeToNearestRoot } from '@lexical/utils';
-import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
-import { useEffect } from 'react';
-import { $createYouTubeNode, YouTubeNode } from '../../nodes/YouTubeNode';
-export const INSERT_YOUTUBE_COMMAND = createCommand('INSERT_YOUTUBE_COMMAND');
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { useEffect } from "react";
+import { $createYouTubeNode, YouTubeNode, } from "../../nodes/YouTubeNode/YouTubeNode";
+export const INSERT_YOUTUBE_COMMAND = createCommand("INSERT_YOUTUBE_COMMAND");
 export default function YouTubePlugin() {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         if (!editor.hasNodes([YouTubeNode])) {
-            throw new Error('YouTubePlugin: YouTubeNode not registered on editor');
+            throw new Error("YouTubePlugin: YouTubeNode not registered on editor");
         }
         return editor.registerCommand(INSERT_YOUTUBE_COMMAND, (payload) => {
             const youTubeNode = $createYouTubeNode(payload);

package/build/themes/PlaygroundEditorTheme.css

@@ -1,19 +1,11 @@
-/**
- * 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.
- *
- *
- */
 .PlaygroundEditorTheme__paragraph {
-  margin: 0;
+  margin: 0 0 1em 0;
   position: relative;
 }
 .PlaygroundEditorTheme__quote {
   margin: 0;
   margin-left: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 1.6em;
   font-size: 15px;
   color: rgb(101, 103, 107);
   border-left-color: rgb(206, 208, 212);
@@ -25,18 +17,18 @@
   font-size: 24px;
   color: rgb(5, 5, 5);
   font-weight: 400;
-  margin: 0;
+  margin: 0 0 1em 0;
 }
 .PlaygroundEditorTheme__h2 {
   font-size: 15px;
   color: rgb(101, 103, 107);
   font-weight: 700;
-  margin: 0;
+  margin: 0 0 1em 0;
   text-transform: uppercase;
 }
 .PlaygroundEditorTheme__h3 {
   font-size: 12px;
-  margin: 0;
+  margin: 0 0 1em 0;
   text-transform: uppercase;
 }
 .PlaygroundEditorTheme__indent {
@@ -73,7 +65,7 @@
 }
 
 .PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderline::after {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   right: 0;
@@ -82,7 +74,7 @@
 }
 
 .PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textStrikethrough::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   right: 0;
@@ -92,7 +84,7 @@
 
 .PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough::before,
 .PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough::after {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   right: 0;
@@ -149,7 +141,7 @@
   position: absolute;
 }
 .PlaygroundEditorTheme__blockCursor:after {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   top: -2px;
@@ -171,10 +163,11 @@
   font-size: 13px;
   margin: 0;
   margin-top: 8px;
-  margin-bottom: 8px;
+  margin-bottom: 1.5em;
   overflow-x: auto;
   position: relative;
   tab-size: 2;
+  white-space: pre;
 }
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
@@ -189,6 +182,9 @@
   text-align: right;
   min-width: 25px;
 }
+.PlaygroundEditorTheme__code span {
+  white-space: nowrap;
+}
 .PlaygroundEditorTheme__tableScrollableWrapper {
   overflow-x: auto;
   margin: 0px 25px 30px 0px;
@@ -247,7 +243,7 @@
 }
 .PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th:after,
 .PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td:after {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   bottom: 0;
@@ -267,7 +263,7 @@
   left: 0;
 }
 .PlaygroundEditorTheme__tableFrozenColumn tr > :first-child::after {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -329,7 +325,7 @@
   top: 0;
   background-color: highlight;
   mix-blend-mode: multiply;
-  content: '';
+  content: "";
   pointer-events: none;
 }
 .PlaygroundEditorTheme__tableAddColumns {
@@ -346,7 +342,7 @@
   background-position: center;
   background-repeat: no-repeat;
   display: block;
-  content: ' ';
+  content: " ";
   position: absolute;
   top: 0;
   left: 0;
@@ -372,7 +368,7 @@
   background-position: center;
   background-repeat: no-repeat;
   display: block;
-  content: ' ';
+  content: " ";
   position: absolute;
   top: 0;
   left: 0;
@@ -424,37 +420,39 @@
 }
 .PlaygroundEditorTheme__ol1 {
   padding: 0;
-  margin: 0;
+  margin: 0 0 1em 0;
   list-style-position: outside;
+  list-style-type: decimal;
 }
 .PlaygroundEditorTheme__ol2 {
   padding: 0;
-  margin: 0;
+  margin: 0 0 1em 0;
   list-style-type: upper-alpha;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol3 {
   padding: 0;
-  margin: 0;
+  margin: 0 0 1em 0;
   list-style-type: lower-alpha;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol4 {
   padding: 0;
-  margin: 0;
+  margin: 0 0 1em 0;
   list-style-type: upper-roman;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol5 {
   padding: 0;
-  margin: 0;
+  margin: 0 0 1em 0;
   list-style-type: lower-roman;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ul {
   padding: 0;
-  margin: 0;
+  margin: 0 0 1em 0;
   list-style-position: outside;
+  list-style-type: disc;
 }
 .PlaygroundEditorTheme__listItem {
   margin: 0 32px;
@@ -486,7 +484,7 @@
 }
 .PlaygroundEditorTheme__listItemUnchecked:before,
 .PlaygroundEditorTheme__listItemChecked:before {
-  content: '\200B';
+  content: "\200B";
   width: 0.9em;
   height: 0.9em;
   top: 50%;
@@ -516,7 +514,7 @@
   background-repeat: no-repeat;
 }
 .PlaygroundEditorTheme__listItemChecked:after {
-  content: '';
+  content: "";
   cursor: pointer;
   border-color: #fff;
   border-style: solid;
@@ -598,7 +596,7 @@
 .PlaygroundEditorTheme__layoutContainer {
   display: grid;
   gap: 10px;
-  margin: 10px 0;
+  margin: 10px 0 1.5em 0;
 }
 .PlaygroundEditorTheme__layoutItem {
   border: 1px dashed #ddd;
@@ -616,7 +614,7 @@
   cursor: pointer;
 }
 .PlaygroundEditorTheme__hr:after {
-  content: '';
+  content: "";
   display: block;
   height: 2px;
   background-color: #ccc;
@@ -683,3 +681,273 @@
   background-repeat: no-repeat;
   background-size: contain;
 }
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  .PlaygroundEditorTheme__quote {
+    color: rgb(154, 158, 165);
+    border-left-color: rgb(99, 102, 107);
+  }
+
+  .PlaygroundEditorTheme__h1 {
+    color: rgb(229, 229, 229);
+  }
+
+  .PlaygroundEditorTheme__h2 {
+    color: rgb(154, 158, 165);
+  }
+
+  .PlaygroundEditorTheme__textHighlight {
+    background: rgba(255, 212, 0, 0.2);
+    border-bottom: 2px solid rgba(255, 212, 0, 0.5);
+  }
+
+  .PlaygroundEditorTheme__textCode {
+    background-color: rgb(45, 45, 48);
+  }
+
+  .PlaygroundEditorTheme__hashtag {
+    background-color: rgba(88, 144, 255, 0.25);
+    border-bottom: 1px solid rgba(88, 144, 255, 0.5);
+  }
+
+  .PlaygroundEditorTheme__link {
+    color: rgb(88, 166, 255);
+  }
+
+  .PlaygroundEditorTheme__blockCursor:after {
+    border-top: 1px solid white;
+  }
+
+  .PlaygroundEditorTheme__code {
+    background-color: rgb(45, 45, 48);
+  }
+
+  .PlaygroundEditorTheme__code:before {
+    background-color: #333;
+    border-right: 1px solid #555;
+    color: #aaa;
+  }
+
+  .PlaygroundEditorTheme__tableScrollRight {
+    box-shadow: inset -10px 0 10px rgba(255, 255, 255, 0.15);
+  }
+
+  .PlaygroundEditorTheme__tableScrollLeft {
+    box-shadow: inset 10px 0 10px rgba(255, 255, 255, 0.15);
+  }
+
+  .PlaygroundEditorTheme__tableScrollMiddle {
+    box-shadow:
+      inset 10px 0 10px rgba(255, 255, 255, 0.15),
+      inset -10px 0 10px rgba(255, 255, 255, 0.15);
+  }
+
+  .PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td {
+    background-color: #1e1e1e;
+  }
+
+  .PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th {
+    background-color: #2d2d2d;
+  }
+
+  .PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th:after,
+  .PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td:after {
+    border-bottom: 1px solid #444;
+  }
+
+  .PlaygroundEditorTheme__tableFrozenColumn tr > td:first-child {
+    background-color: #1e1e1e;
+  }
+
+  .PlaygroundEditorTheme__tableFrozenColumn tr > th:first-child {
+    background-color: #2d2d2d;
+  }
+
+  .PlaygroundEditorTheme__tableFrozenColumn tr > :first-child::after {
+    border-right: 1px solid #444;
+  }
+
+  .PlaygroundEditorTheme__tableRowStriping tr:nth-child(even),
+  .PlaygroundEditorTheme__tableFrozenColumn
+    .PlaygroundEditorTheme__table.PlaygroundEditorTheme__tableRowStriping
+    tr:nth-child(even)
+    > td:first-child {
+    background-color: #2a2a3a;
+  }
+
+  .PlaygroundEditorTheme__tableSelected {
+    outline: 2px solid rgb(88, 166, 255);
+  }
+
+  .PlaygroundEditorTheme__tableCell {
+    border: 1px solid #888;
+  }
+
+  .PlaygroundEditorTheme__tableCellHeader {
+    background-color: #3f3f3f;
+  }
+
+  .PlaygroundEditorTheme__tableAddColumns {
+    background-color: #333;
+  }
+
+  .PlaygroundEditorTheme__tableAddColumns:hover,
+  .PlaygroundEditorTheme__tableAddRows:hover {
+    background-color: #3a4a5a;
+  }
+
+  .PlaygroundEditorTheme__tableAddRows {
+    background-color: #333;
+  }
+
+  .PlaygroundEditorTheme__tableCellResizeRuler {
+    background-color: rgb(88, 166, 255);
+  }
+
+  .PlaygroundEditorTheme__tableCellActionButton {
+    background-color: #333;
+    color: #ddd;
+  }
+
+  .PlaygroundEditorTheme__tableCellActionButton:hover {
+    background-color: #444;
+  }
+
+  .PlaygroundEditorTheme__characterLimit {
+    background-color: #663333 !important;
+  }
+
+  .PlaygroundEditorTheme__listItemUnchecked:focus:before,
+  .PlaygroundEditorTheme__listItemChecked:focus:before {
+    box-shadow: 0 0 0 2px #4a5f8f;
+  }
+
+  .PlaygroundEditorTheme__listItemUnchecked:before {
+    border: 1px solid #666;
+  }
+
+  .PlaygroundEditorTheme__listItemChecked:before {
+    border: 1px solid rgb(88, 166, 255);
+    background-color: #5a9aff;
+  }
+
+  .PlaygroundEditorTheme__listItemChecked:after {
+    border-color: #1e1e1e;
+  }
+
+  .PlaygroundEditorTheme__tokenComment {
+    color: #7a8f8f;
+  }
+
+  .PlaygroundEditorTheme__tokenDeleted {
+    border-image: linear-gradient(to right, #663333 50%, #552222 50%) fill 0/0/0
+      100vw;
+  }
+
+  .PlaygroundEditorTheme__tokenInserted {
+    border-image: linear-gradient(to right, #336633 50%, #224422 50%) fill 0/0/0
+      100vw;
+  }
+
+  .PlaygroundEditorTheme__tokenUnchanged {
+    border-image: linear-gradient(to right, #444 50%, #333 50%) fill 0/0/0 100vw;
+  }
+
+  .PlaygroundEditorTheme__tokenPunctuation {
+    color: #777;
+  }
+
+  .PlaygroundEditorTheme__tokenProperty {
+    color: #d88fb3;
+  }
+
+  .PlaygroundEditorTheme__tokenSelector {
+    color: #99dd66;
+  }
+
+  .PlaygroundEditorTheme__tokenOperator {
+    color: #d4a574;
+  }
+
+  .PlaygroundEditorTheme__tokenAttr {
+    color: #58aaff;
+  }
+
+  .PlaygroundEditorTheme__tokenVariable {
+    color: #ffbb22;
+  }
+
+  .PlaygroundEditorTheme__tokenFunction {
+    color: #ff6b88;
+  }
+
+  .PlaygroundEditorTheme__mark {
+    background: rgba(255, 212, 0, 0.2);
+    border-bottom: 2px solid rgba(255, 212, 0, 0.5);
+  }
+
+  .PlaygroundEditorTheme__markOverlap {
+    background: rgba(255, 212, 0, 0.4);
+    border-bottom: 2px solid rgba(255, 212, 0, 0.6);
+  }
+
+  .PlaygroundEditorTheme__mark.selected {
+    background: rgba(255, 212, 0, 0.3);
+    border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+  }
+
+  .PlaygroundEditorTheme__markOverlap.selected {
+    background: rgba(255, 212, 0, 0.4);
+    border-bottom: 2px solid rgba(255, 212, 0, 0.6);
+  }
+
+  .PlaygroundEditorTheme__embedBlockFocus {
+    outline: 2px solid rgb(88, 166, 255);
+  }
+
+  .PlaygroundEditorTheme__layoutItem {
+    border: 1px dashed #444;
+  }
+
+  .PlaygroundEditorTheme__autocomplete {
+    color: #666;
+  }
+
+  .PlaygroundEditorTheme__hr:after {
+    background-color: #555;
+  }
+
+  .PlaygroundEditorTheme__hr.PlaygroundEditorTheme__hrSelected {
+    outline: 2px solid rgb(88, 166, 255);
+  }
+
+  .PlaygroundEditorTheme__specialText {
+    background-color: #664400;
+  }
+
+  .PlaygroundEditorTheme__contextMenu {
+    background: #1e1e1e;
+    border: 1px solid #444;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  }
+
+  .PlaygroundEditorTheme__contextMenuItem {
+    background-color: #1e1e1e;
+    color: #e0e0e0;
+  }
+
+  .PlaygroundEditorTheme__contextMenuItem.open {
+    background: #333;
+  }
+
+  .PlaygroundEditorTheme__contextMenuItem:focus,
+  .PlaygroundEditorTheme__contextMenuItem:not([disabled]):active {
+    background: #2a2a2a;
+  }
+
+  .PlaygroundEditorTheme__contextMenuItem:disabled {
+    background: #1e1e1e;
+    color: #666;
+  }
+}