create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-node/list-node/list-node.scss

@@ -0,0 +1,208 @@
+.tiptap.ProseMirror {
+  --tt-checklist-bg-color: var(--tt-gray-light-a-100);
+  --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-border-color: var(--tt-gray-light-a-200);
+  --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-check-icon-color: var(--white);
+  --tt-checklist-text-active: var(--tt-gray-light-a-500);
+
+  .dark & {
+    --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
+    --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
+    --tt-checklist-border-color: var(--tt-gray-dark-a-200);
+    --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
+    --tt-checklist-check-icon-color: var(--black);
+    --tt-checklist-text-active: var(--tt-gray-dark-a-500);
+  }
+}
+
+/* =====================
+     LISTS
+     ===================== */
+.tiptap.ProseMirror {
+  // Common list styles
+  ol,
+  ul {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    padding-left: 1.5em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    ol,
+    ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  li {
+    p:not(:first-child):not(td p):not(th p) {
+      margin-top: 0;
+      line-height: 1.6;
+    }
+  }
+
+  // Ordered lists
+  ol {
+    list-style: decimal;
+
+    ol {
+      list-style: lower-alpha;
+
+      ol {
+        list-style: lower-roman;
+
+        ol {
+          list-style: decimal;
+
+          ol {
+            list-style: lower-alpha;
+
+            ol {
+              list-style: lower-roman;
+
+              ol {
+                list-style: decimal;
+
+                ol {
+                  list-style: lower-alpha;
+
+                  ol {
+                    list-style: lower-roman;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Unordered lists
+  ul:not([data-type="taskList"]) {
+    list-style: disc;
+
+    ul {
+      list-style: circle;
+
+      ul {
+        list-style: square;
+
+        ul {
+          list-style: disc;
+
+          ul {
+            list-style: circle;
+
+            ul {
+              list-style: square;
+
+              ul {
+                list-style: disc;
+
+                ul {
+                  list-style: circle;
+
+                  ul {
+                    list-style: square;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Task lists
+  ul[data-type="taskList"] {
+    padding-left: 0.25em;
+
+    li {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      &:not(:has(> p:first-child)) {
+        list-style-type: none;
+      }
+
+      &[data-checked="true"] {
+        > div > p {
+          opacity: 0.5;
+          text-decoration: line-through;
+        }
+
+        > div > p span {
+          text-decoration: line-through;
+        }
+      }
+
+      label {
+        position: relative;
+        padding-top: 0.375rem;
+        padding-right: 0.5rem;
+
+        input[type="checkbox"] {
+          position: absolute;
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        span {
+          display: block;
+          width: 1em;
+          height: 1em;
+          border: 1px solid var(--tt-checklist-border-color);
+          border-radius: var(--tt-radius-xs, 0.25rem);
+          position: relative;
+          cursor: pointer;
+          background-color: var(--tt-checklist-bg-color);
+          transition:
+            background-color 80ms ease-out,
+            border-color 80ms ease-out;
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 0.75em;
+            height: 0.75em;
+            background-color: var(--tt-checklist-check-icon-color);
+            opacity: 0;
+            -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E")
+              center/contain no-repeat;
+            mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E")
+              center/contain no-repeat;
+          }
+        }
+
+        input[type="checkbox"]:checked + span {
+          background: var(--tt-checklist-bg-active-color);
+          border-color: var(--tt-checklist-border-active-color);
+
+          &::before {
+            opacity: 1;
+          }
+        }
+      }
+
+      div {
+        flex: 1 1 0%;
+        min-width: 0;
+      }
+    }
+  }
+}

package/template/src/admin/components/tiptap-node/paragraph-node/paragraph-node.scss

@@ -0,0 +1,217 @@
+.tiptap.ProseMirror {
+  --tt-collaboration-carets-label: var(--tt-gray-light-900);
+  --link-text-color: var(--tt-brand-color-500);
+  --placeholder-color: var(--tt-gray-light-a-400);
+
+  // ai
+  --tiptap-ai-insertion-color: var(--tt-brand-color-600);
+
+  .dark & {
+    --tt-collaboration-carets-label: var(--tt-gray-dark-100);
+    --link-text-color: var(--tt-brand-color-400);
+    --placeholder-color: var(--tt-gray-dark-a-400);
+
+    --tiptap-ai-insertion-color: var(--tt-brand-color-400);
+  }
+}
+
+/* Ensure each top-level node has relative positioning
+   so absolutely positioned placeholders work correctly */
+.tiptap.ProseMirror > * {
+  position: relative;
+}
+
+/* =====================
+     CORE EDITOR STYLES
+     ===================== */
+.tiptap.ProseMirror {
+  white-space: pre-wrap;
+  outline: none;
+  caret-color: var(--tt-cursor-color);
+
+  // Paragraph spacing
+  p:not(:first-child):not(td p):not(th p) {
+    margin-top: 20px;
+  }
+
+  p:not(td p):not(th p) {
+    font-size: 1rem;
+    line-height: 1.6;
+    font-weight: normal;
+  }
+
+  // Selection styles
+  &:not(.readonly):not(.ProseMirror-hideselection) {
+    ::selection {
+      background-color: var(--tt-selection-color);
+    }
+
+    .selection::selection {
+      background: transparent;
+    }
+  }
+
+  .selection {
+    display: inline;
+    background-color: var(--tt-selection-color);
+  }
+
+  // Selected node styles
+  .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
+    border-radius: var(--tt-radius-md);
+    background-color: var(--tt-selection-color);
+  }
+
+  .ProseMirror-hideselection {
+    caret-color: transparent;
+  }
+
+  // Resize cursor
+  &.resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+}
+
+/* =====================
+     TEXT DECORATION
+     ===================== */
+.tiptap.ProseMirror {
+  // Text decoration inheritance for spans
+  a span {
+    text-decoration: underline;
+  }
+
+  s span {
+    text-decoration: line-through;
+  }
+
+  u span {
+    text-decoration: underline;
+  }
+
+  .tiptap-ai-insertion {
+    color: var(--tiptap-ai-insertion-color);
+  }
+}
+
+/* =====================
+     COLLABORATION
+     ===================== */
+.tiptap.ProseMirror {
+  .collaboration-carets {
+    &__caret {
+      border-right: 1px solid transparent;
+      border-left: 1px solid transparent;
+      pointer-events: none;
+      margin-left: -1px;
+      margin-right: -1px;
+      position: relative;
+      word-break: normal;
+    }
+
+    &__label {
+      color: var(--tt-collaboration-carets-label);
+      border-radius: 0.25rem;
+      border-bottom-left-radius: 0;
+      font-size: 0.75rem;
+      font-weight: 600;
+      left: -1px;
+      line-height: 1;
+      padding: 0.125rem 0.375rem;
+      position: absolute;
+      top: -1.3em;
+      user-select: none;
+      white-space: nowrap;
+    }
+  }
+}
+
+/* =====================
+     EMOJI
+     ===================== */
+.tiptap.ProseMirror [data-type="emoji"] img {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  cursor: text;
+}
+
+/* =====================
+     LINKS
+     ===================== */
+.tiptap.ProseMirror {
+  a {
+    color: var(--link-text-color);
+    text-decoration: underline;
+  }
+}
+
+/* =====================
+     MENTION
+     ===================== */
+.tiptap.ProseMirror {
+  [data-type="mention"] {
+    display: inline-block;
+    color: var(--tt-brand-color-500);
+  }
+}
+
+/* =====================
+     PLACEHOLDER
+     ===================== */
+.is-empty:not(.with-slash)[data-placeholder]:has(
+    > .ProseMirror-trailingBreak:only-child
+  )::before {
+  content: attr(data-placeholder);
+}
+
+.is-empty.with-slash[data-placeholder]:has(
+    > .ProseMirror-trailingBreak:only-child
+  )::before {
+  content: "Write, type '/' for commands…";
+  font-style: italic;
+}
+
+.is-empty[data-placeholder]:has(
+    > .ProseMirror-trailingBreak:only-child
+  ):before {
+  pointer-events: none;
+  height: 0;
+  position: absolute;
+  width: 100%;
+  text-align: inherit;
+  left: 0;
+  right: 0;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
+  color: var(--placeholder-color);
+}
+
+/* =====================
+     DROPCURSOR
+     ===================== */
+.prosemirror-dropcursor-block,
+.prosemirror-dropcursor-inline {
+  background: var(--tt-brand-color-400) !important;
+  border-radius: 0.25rem;
+  margin-left: -1px;
+  margin-right: -1px;
+  width: 100%;
+  height: 0.188rem;
+  cursor: grabbing;
+}
+
+/* =====================
+     INDENT
+     ===================== */
+
+.tiptap.ProseMirror {
+  --tt-indent-unit: 24px;
+
+  [data-indent] {
+    transition: margin-left 0.2s ease-in-out;
+    margin-left: calc(var(--tt-indent-unit) * var(--tt-indent-level, 0));
+  }
+}

package/template/src/admin/components/tiptap-templates/simple/NOTICE.md

@@ -0,0 +1,14 @@
+# Tiptap Simple Editor
+
+This directory and its dependent `src/admin/components/tiptap-*`, `src/admin/hooks`,
+`src/admin/lib`, and `src/admin/styles` sources were installed with:
+
+```sh
+npx @tiptap/cli@3.19.4 add simple-editor
+```
+
+Tiptap publishes the Simple Editor template and its included UI components under
+MIT. Source: https://tiptap.dev/docs/ui-components/templates/simple-editor
+
+Local changes connect the editor to this project's D1 document model and R2 media
+upload API. Keep the attribution when updating or redistributing these sources.