5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/themes/PlaygroundEditorTheme.css

@@ -0,0 +1,447 @@
+/**
+ * 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__ltr {
+  text-align: left;
+}
+.PlaygroundEditorTheme__rtl {
+  text-align: right;
+}
+.PlaygroundEditorTheme__paragraph {
+  margin: 0;
+  position: relative;
+}
+.PlaygroundEditorTheme__quote {
+  margin: 0;
+  margin-left: 20px;
+  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;
+}
+.PlaygroundEditorTheme__h1 {
+  font-size: 24px;
+  color: rgb(5, 5, 5);
+  font-weight: 400;
+  margin: 0;
+}
+.PlaygroundEditorTheme__h2 {
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  font-weight: 700;
+  margin: 0;
+  text-transform: uppercase;
+}
+.PlaygroundEditorTheme__h3 {
+  font-size: 12px;
+  margin: 0;
+  text-transform: uppercase;
+}
+.PlaygroundEditorTheme__indent {
+  --lexical-indent-base-value: 40px;
+}
+.PlaygroundEditorTheme__textBold {
+  font-weight: bold;
+}
+.PlaygroundEditorTheme__textItalic {
+  font-style: italic;
+}
+.PlaygroundEditorTheme__textUnderline {
+  text-decoration: underline;
+}
+.PlaygroundEditorTheme__textStrikethrough {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__textUnderlineStrikethrough {
+  text-decoration: underline line-through;
+}
+.PlaygroundEditorTheme__textSubscript {
+  font-size: 0.8em;
+  vertical-align: sub !important;
+}
+.PlaygroundEditorTheme__textSuperscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
+.PlaygroundEditorTheme__textCode {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
+.PlaygroundEditorTheme__hashtag {
+  background-color: rgba(88, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+}
+.PlaygroundEditorTheme__link {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+}
+.PlaygroundEditorTheme__link:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__code {
+  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;
+  overflow-x: auto;
+  position: relative;
+  tab-size: 2;
+}
+.PlaygroundEditorTheme__code: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;
+}
+.PlaygroundEditorTheme__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-y: scroll;
+  overflow-x: scroll;
+  table-layout: fixed;
+  width: fit-content;
+  margin: 0px 25px 30px 0px;
+}
+.PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
+  background-color: #f2f5fb;
+}
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
+.PlaygroundEditorTheme__tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__tableCell {
+  border: 1px solid #bbb;
+  width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  outline: none;
+}
+.PlaygroundEditorTheme__tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #999;
+}
+.PlaygroundEditorTheme__tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellHeader {
+  background-color: #f2f3f5;
+  text-align: start;
+}
+.PlaygroundEditorTheme__tableCellSelected {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableCellPrimarySelected {
+  border: 2px solid rgb(60, 132, 244);
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+.PlaygroundEditorTheme__tableCellEditing {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+}
+.PlaygroundEditorTheme__tableAddColumns {
+  position: absolute;
+  background-color: #eee;
+  height: 100%;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddColumns:after {
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.PlaygroundEditorTheme__tableAddColumns:hover,
+.PlaygroundEditorTheme__tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableAddRows {
+  position: absolute;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddRows:after {
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PlaygroundEditorTheme__tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.PlaygroundEditorTheme__tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableCellActionButton:hover {
+  background-color: #ddd;
+}
+.PlaygroundEditorTheme__characterLimit {
+  display: inline;
+  background-color: #ffbbbb !important;
+}
+.PlaygroundEditorTheme__ol1 {
+  padding: 0;
+  margin: 0;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ol2 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-alpha;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ol3 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-alpha;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ol4 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-roman;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ol5 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-roman;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ul {
+  padding: 0;
+  margin: 0;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__listItem {
+  margin: 0 32px;
+}
+.PlaygroundEditorTheme__listItemChecked,
+.PlaygroundEditorTheme__listItemUnchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+.PlaygroundEditorTheme__listItemChecked {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before,
+.PlaygroundEditorTheme__listItemChecked:before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+.PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,
+.PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {
+  left: auto;
+  right: 0;
+}
+.PlaygroundEditorTheme__listItemUnchecked:focus:before,
+.PlaygroundEditorTheme__listItemChecked:focus:before {
+  box-shadow: 0 0 0 2px #a6cdfe;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before {
+  border: 1px solid #999;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemChecked:before {
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 2px;
+  background-color: #3d87f5;
+  background-repeat: no-repeat;
+}
+.PlaygroundEditorTheme__listItemChecked:after {
+  content: '';
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 6px;
+  width: 3px;
+  left: 7px;
+  right: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+.PlaygroundEditorTheme__nestedListItem {
+  list-style-type: none;
+}
+.PlaygroundEditorTheme__nestedListItem:before,
+.PlaygroundEditorTheme__nestedListItem:after {
+  display: none;
+}
+.PlaygroundEditorTheme__tokenComment {
+  color: slategray;
+}
+.PlaygroundEditorTheme__tokenPunctuation {
+  color: #999;
+}
+.PlaygroundEditorTheme__tokenProperty {
+  color: #905;
+}
+.PlaygroundEditorTheme__tokenSelector {
+  color: #690;
+}
+.PlaygroundEditorTheme__tokenOperator {
+  color: #9a6e3a;
+}
+.PlaygroundEditorTheme__tokenAttr {
+  color: #07a;
+}
+.PlaygroundEditorTheme__tokenVariable {
+  color: #e90;
+}
+.PlaygroundEditorTheme__tokenFunction {
+  color: #dd4a68;
+}
+.PlaygroundEditorTheme__mark {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+}
+.PlaygroundEditorTheme__markOverlap {
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__mark.selected {
+  background: rgba(255, 212, 0, 0.5);
+  border-bottom: 2px solid rgba(255, 212, 0, 1);
+}
+.PlaygroundEditorTheme__markOverlap.selected {
+  background: rgba(255, 212, 0, 0.7);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__embedBlock {
+  user-select: none;
+}
+.PlaygroundEditorTheme__embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__layoutContainer {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.PlaygroundEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}
+.PlaygroundEditorTheme__autocomplete {
+  color: #ccc;
+}
+.PlaygroundEditorTheme__hr {
+  padding: 2px 2px;
+  border: none;
+  margin: 1em 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__hr:after {
+  content: '';
+  display: block;
+  height: 2px;
+  background-color: #ccc;
+  line-height: 2px;
+}
+.PlaygroundEditorTheme__hr.selected {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}

package/src/client/components/inputv3/Rte/themes/PlaygroundEditorTheme.ts

@@ -0,0 +1,120 @@
+/**
+ * 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 { EditorThemeClasses } from 'lexical';
+
+import './PlaygroundEditorTheme.css';
+
+const theme: EditorThemeClasses = {
+    autocomplete: 'PlaygroundEditorTheme__autocomplete',
+    blockCursor: 'PlaygroundEditorTheme__blockCursor',
+    characterLimit: 'PlaygroundEditorTheme__characterLimit',
+    code: 'PlaygroundEditorTheme__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',
+    },
+    embedBlock: {
+        base: 'PlaygroundEditorTheme__embedBlock',
+        focus: 'PlaygroundEditorTheme__embedBlockFocus',
+    },
+    hashtag: 'PlaygroundEditorTheme__hashtag',
+    heading: {
+        h1: 'PlaygroundEditorTheme__h1',
+        h2: 'PlaygroundEditorTheme__h2',
+        h3: 'PlaygroundEditorTheme__h3',
+        h4: 'PlaygroundEditorTheme__h4',
+        h5: 'PlaygroundEditorTheme__h5',
+        h6: 'PlaygroundEditorTheme__h6',
+    },
+    hr: 'PlaygroundEditorTheme__hr',
+    image: 'editor-image',
+    indent: 'PlaygroundEditorTheme__indent',
+    inlineImage: 'inline-editor-image',
+    layoutContainer: 'PlaygroundEditorTheme__layoutContainer',
+    layoutItem: 'PlaygroundEditorTheme__layoutItem',
+    link: 'PlaygroundEditorTheme__link',
+    list: {
+        checklist: 'PlaygroundEditorTheme__checklist',
+        listitem: '',
+        listitemChecked: 'PlaygroundEditorTheme__listItemChecked',
+        listitemUnchecked: 'PlaygroundEditorTheme__listItemUnchecked',
+        nested: {
+            listitem: 'PlaygroundEditorTheme__nestedListItem',
+        },
+        olDepth: [
+            'PlaygroundEditorTheme__ol1',
+            'PlaygroundEditorTheme__ol2',
+            'PlaygroundEditorTheme__ol3',
+            'PlaygroundEditorTheme__ol4',
+            'PlaygroundEditorTheme__ol5',
+        ],
+        ul: 'liste',
+    },
+    ltr: 'PlaygroundEditorTheme__ltr',
+    mark: 'PlaygroundEditorTheme__mark',
+    markOverlap: 'PlaygroundEditorTheme__markOverlap',
+    paragraph: 'PlaygroundEditorTheme__paragraph',
+    quote: 'PlaygroundEditorTheme__quote',
+    rtl: 'PlaygroundEditorTheme__rtl',
+    table: 'PlaygroundEditorTheme__table',
+    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',
+    tableRowStriping: 'PlaygroundEditorTheme__tableRowStriping',
+    tableSelected: 'PlaygroundEditorTheme__tableSelected',
+    tableSelection: 'PlaygroundEditorTheme__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',
+    },
+};
+
+export default theme;

package/src/client/components/inputv3/Rte/themes/StickyEditorTheme.css

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.StickyEditorTheme__paragraph {
+  margin: 0;
+  position: 'relative';
+}

package/src/client/components/inputv3/Rte/themes/StickyEditorTheme.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 {EditorThemeClasses} from 'lexical';
+
+import './StickyEditorTheme.css';
+
+import baseTheme from './PlaygroundEditorTheme';
+
+const theme: EditorThemeClasses = {
+  ...baseTheme,
+  paragraph: 'StickyEditorTheme__paragraph',
+};
+
+export default theme;

package/src/client/components/inputv3/Rte/ui/ColorPicker.css

@@ -0,0 +1,88 @@
+/**
+ * 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.
+ *
+ */
+
+.color-picker-wrapper {
+  padding: 20px;
+}
+
+.color-picker-basic-color {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.color-picker-basic-color button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.color-picker-basic-color button.active {
+  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+.color-picker-saturation {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 150px;
+  background-image: linear-gradient(transparent, black),
+    linear-gradient(to right, white, transparent);
+  user-select: none;
+}
+.color-picker-saturation_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 15px #00000026;
+  box-sizing: border-box;
+  transform: translate(-10px, -10px);
+}
+.color-picker-hue {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 12px;
+  background-image: linear-gradient(
+    to right,
+    rgb(255, 0, 0),
+    rgb(255, 255, 0),
+    rgb(0, 255, 0),
+    rgb(0, 255, 255),
+    rgb(0, 0, 255),
+    rgb(255, 0, 255),
+    rgb(255, 0, 0)
+  );
+  user-select: none;
+  border-radius: 12px;
+}
+
+.color-picker-hue_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: #0003 0 0 0 0.5px;
+  box-sizing: border-box;
+  transform: translate(-10px, -4px);
+}
+
+.color-picker-color {
+  border: 1px solid #ccc;
+  margin-top: 15px;
+  width: 100%;
+  height: 20px;
+}