create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-extension/node-background-extension.ts

@@ -0,0 +1,150 @@
+import type { NodeWithPos } from "@tiptap/core"
+import { Extension } from "@tiptap/core"
+import type { EditorState, Transaction } from "@tiptap/pm/state"
+import { getSelectedNodesOfType } from "@/lib/tiptap-utils"
+import { updateNodesAttr } from "@/lib/tiptap-utils"
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    nodeBackground: {
+      setNodeBackgroundColor: (backgroundColor: string) => ReturnType
+      unsetNodeBackgroundColor: () => ReturnType
+      toggleNodeBackgroundColor: (backgroundColor: string) => ReturnType
+    }
+  }
+}
+
+export interface NodeBackgroundOptions {
+  /**
+   * Node types that should support background colors
+   * @default ["paragraph", "heading", "blockquote", "taskList", "bulletList", "orderedList", "tableCell", "tableHeader"]
+   */
+  types: string[]
+  /**
+   * Use inline style instead of data attribute
+   * @default true
+   */
+  useStyle?: boolean
+}
+
+/**
+ * Determines the target color for toggle operations
+ */
+function getToggleColor(
+  targets: NodeWithPos[],
+  inputColor: string
+): string | null {
+  if (targets.length === 0) return null
+
+  for (const target of targets) {
+    const currentColor = target.node.attrs?.backgroundColor ?? null
+    if (currentColor !== inputColor) {
+      return inputColor
+    }
+  }
+
+  return null
+}
+
+export const NodeBackground = Extension.create<NodeBackgroundOptions>({
+  name: "nodeBackground",
+
+  addOptions() {
+    return {
+      types: [
+        "paragraph",
+        "heading",
+        "blockquote",
+        "taskList",
+        "bulletList",
+        "orderedList",
+        "tableCell",
+        "tableHeader",
+      ],
+      useStyle: true,
+    }
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null as string | null,
+
+            parseHTML: (element: HTMLElement) => {
+              const styleColor = element.style?.backgroundColor
+              if (styleColor) return styleColor
+
+              const dataColor = element.getAttribute("data-background-color")
+              return dataColor || null
+            },
+
+            renderHTML: (attributes) => {
+              const color = attributes.backgroundColor as string | null
+              if (!color) return {}
+
+              if (this.options.useStyle) {
+                return {
+                  style: `background-color: ${color}`,
+                }
+              } else {
+                return {
+                  "data-background-color": color,
+                }
+              }
+            },
+          },
+        },
+      },
+    ]
+  },
+
+  addCommands() {
+    /**
+     * Generic command executor for background color operations
+     */
+    const executeBackgroundCommand = (
+      getTargetColor: (
+        targets: NodeWithPos[],
+        inputColor?: string
+      ) => string | null
+    ) => {
+      return (inputColor?: string) =>
+        ({ state, tr }: { state: EditorState; tr: Transaction }) => {
+          const targets = getSelectedNodesOfType(
+            state.selection,
+            this.options.types
+          )
+
+          if (targets.length === 0) return false
+
+          const targetColor = getTargetColor(targets, inputColor)
+
+          return updateNodesAttr(tr, targets, "backgroundColor", targetColor)
+        }
+    }
+
+    return {
+      /**
+       * Set background color to specific value
+       */
+      setNodeBackgroundColor: executeBackgroundCommand(
+        (_, inputColor) => inputColor || null
+      ),
+
+      /**
+       * Remove background color
+       */
+      unsetNodeBackgroundColor: executeBackgroundCommand(() => null),
+
+      /**
+       * Toggle background color (set if different/missing, unset if all have it)
+       */
+      toggleNodeBackgroundColor: executeBackgroundCommand(
+        (targets, inputColor) => getToggleColor(targets, inputColor || "")
+      ),
+    }
+  },
+})

package/template/src/admin/components/tiptap-icons/align-center-icon.tsx

@@ -0,0 +1,38 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AlignCenterIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 18C4 17.4477 4.44772 17 5 17H19C19.5523 17 20 17.4477 20 18C20 18.5523 19.5523 19 19 19H5C4.44772 19 4 18.5523 4 18Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AlignCenterIcon.displayName = "AlignCenterIcon"

package/template/src/admin/components/tiptap-icons/align-justify-icon.tsx

@@ -0,0 +1,38 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AlignJustifyIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AlignJustifyIcon.displayName = "AlignJustifyIcon"

package/template/src/admin/components/tiptap-icons/align-left-icon.tsx

@@ -0,0 +1,38 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AlignLeftIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 12C2 11.4477 2.44772 11 3 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H3C2.44772 13 2 12.5523 2 12Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 18C2 17.4477 2.44772 17 3 17H17C17.5523 17 18 17.4477 18 18C18 18.5523 17.5523 19 17 19H3C2.44772 19 2 18.5523 2 18Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AlignLeftIcon.displayName = "AlignLeftIcon"

package/template/src/admin/components/tiptap-icons/align-right-icon.tsx

@@ -0,0 +1,38 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AlignRightIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 12C8 11.4477 8.44772 11 9 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H9C8.44772 13 8 12.5523 8 12Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 18C6 17.4477 6.44772 17 7 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H7C6.44772 19 6 18.5523 6 18Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AlignRightIcon.displayName = "AlignRightIcon"

package/template/src/admin/components/tiptap-icons/arrow-left-icon.tsx

@@ -0,0 +1,24 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const ArrowLeftIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071C13.0976 19.3166 13.0976 18.6834 12.7071 18.2929L7.41421 13L19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11L7.41421 11L12.7071 5.70711Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+ArrowLeftIcon.displayName = "ArrowLeftIcon"

package/template/src/admin/components/tiptap-icons/arrow-right-icon.tsx

@@ -0,0 +1,26 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const ArrowRightIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289C10.9024 4.68342 10.9024 5.31658 11.2929 5.70711L16.5858 11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H16.5858L11.2929 18.2929C10.9024 18.6834 10.9024 19.3166 11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L19.7071 12.7071C20.0976 12.3166 20.0976 11.6834 19.7071 11.2929L12.7071 4.29289Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+ArrowRightIcon.displayName = "ArrowRightIcon"

package/template/src/admin/components/tiptap-icons/ban-icon.tsx

@@ -0,0 +1,26 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const BanIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.43471 4.01458C4.34773 4.06032 4.26607 4.11977 4.19292 4.19292C4.11977 4.26607 4.06032 4.34773 4.01458 4.43471C2.14611 6.40628 1 9.0693 1 12C1 18.0751 5.92487 23 12 23C14.9306 23 17.5936 21.854 19.5651 19.9856C19.6522 19.9398 19.7339 19.8803 19.8071 19.8071C19.8803 19.7339 19.9398 19.6522 19.9856 19.5651C21.854 17.5936 23 14.9306 23 12C23 5.92487 18.0751 1 12 1C9.0693 1 6.40628 2.14611 4.43471 4.01458ZM6.38231 4.9681C7.92199 3.73647 9.87499 3 12 3C16.9706 3 21 7.02944 21 12C21 14.125 20.2635 16.078 19.0319 17.6177L6.38231 4.9681ZM17.6177 19.0319C16.078 20.2635 14.125 21 12 21C7.02944 21 3 16.9706 3 12C3 9.87499 3.73647 7.92199 4.9681 6.38231L17.6177 19.0319Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+BanIcon.displayName = "BanIcon"

package/template/src/admin/components/tiptap-icons/blockquote-icon.tsx

@@ -0,0 +1,44 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const BlockquoteIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 6C8 5.44772 8.44772 5 9 5H16C16.5523 5 17 5.44772 17 6C17 6.55228 16.5523 7 16 7H9C8.44772 7 8 6.55228 8 6Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 3C4.55228 3 5 3.44772 5 4L5 20C5 20.5523 4.55229 21 4 21C3.44772 21 3 20.5523 3 20L3 4C3 3.44772 3.44772 3 4 3Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 12C8 11.4477 8.44772 11 9 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H9C8.44772 13 8 12.5523 8 12Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 18C8 17.4477 8.44772 17 9 17H16C16.5523 17 17 17.4477 17 18C17 18.5523 16.5523 19 16 19H9C8.44772 19 8 18.5523 8 18Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+BlockquoteIcon.displayName = "BlockquoteIcon"

package/template/src/admin/components/tiptap-icons/bold-icon.tsx

@@ -0,0 +1,26 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const BoldIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 2.5C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H15C16.4587 21.5 17.8576 20.9205 18.8891 19.8891C19.9205 18.8576 20.5 17.4587 20.5 16C20.5 14.5413 19.9205 13.1424 18.8891 12.1109C18.6781 11.9 18.4518 11.7079 18.2128 11.5359C19.041 10.5492 19.5 9.29829 19.5 8C19.5 6.54131 18.9205 5.14236 17.8891 4.11091C16.8576 3.07946 15.4587 2.5 14 2.5H6ZM14 10.5C14.663 10.5 15.2989 10.2366 15.7678 9.76777C16.2366 9.29893 16.5 8.66304 16.5 8C16.5 7.33696 16.2366 6.70107 15.7678 6.23223C15.2989 5.76339 14.663 5.5 14 5.5H7.5V10.5H14ZM7.5 18.5V13.5H15C15.663 13.5 16.2989 13.7634 16.7678 14.2322C17.2366 14.7011 17.5 15.337 17.5 16C17.5 16.663 17.2366 17.2989 16.7678 17.7678C16.2989 18.2366 15.663 18.5 15 18.5H7.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+BoldIcon.displayName = "BoldIcon"

package/template/src/admin/components/tiptap-icons/case-sensitive-icon.tsx

@@ -0,0 +1,32 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const CaseSensitiveIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.61132 5.00586C6.86822 5.02489 7.11659 5.11042 7.33202 5.25391C7.57828 5.41804 7.7708 5.65169 7.88476 5.9248L11.9228 15.6152C12.1351 16.1249 11.8944 16.7104 11.3848 16.9229C10.875 17.1353 10.2896 16.8936 10.0771 16.3838L9.08397 14H3.91698L2.92284 16.3848C2.7102 16.8942 2.12483 17.1352 1.61522 16.9229C1.10565 16.7104 0.86489 16.1249 1.07714 15.6152L5.1162 5.9248L5.1621 5.82422C5.27859 5.5943 5.45343 5.39755 5.66894 5.25391L5.76269 5.19629C5.98724 5.06944 6.24182 5.00195 6.50097 5.00195L6.61132 5.00586ZM4.74999 12H8.24999L6.49999 7.80078L4.74999 12Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22 8C22.5523 8.00001 23 8.44772 23 9V16C23 16.5523 22.5523 17 22 17C21.5246 17 21.127 16.6682 21.0254 16.2236C20.3052 16.713 19.4363 17 18.5 17C16.0147 17 14 14.9853 14 12.5C14 10.0147 16.0147 8 18.5 8C19.4361 8 20.3053 8.2862 21.0254 8.77539C21.1273 8.33127 21.5249 8 22 8ZM18.5 10C17.1193 10 16 11.1193 16 12.5C16 13.8807 17.1193 15 18.5 15C19.8807 15 21 13.8807 21 12.5C21 11.1193 19.8807 10 18.5 10Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+CaseSensitiveIcon.displayName = "CaseSensitiveIcon"

package/template/src/admin/components/tiptap-icons/check-icon.tsx

@@ -0,0 +1,26 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const CheckIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+CheckIcon.displayName = "CheckIcon"

package/template/src/admin/components/tiptap-icons/chevron-down-icon.tsx

@@ -0,0 +1,26 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const ChevronDownIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+ChevronDownIcon.displayName = "ChevronDownIcon"

package/template/src/admin/components/tiptap-icons/chevron-up-icon.tsx

@@ -0,0 +1,22 @@
+import { memo } from "react"
+import { ChevronDownIcon } from "@/components/tiptap-icons/chevron-down-icon"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const ChevronUpIcon = memo(
+  ({ className, style, ...props }: SvgProps) => {
+    return (
+      <ChevronDownIcon
+        className={className}
+        style={{
+          transform: "rotate(180deg)",
+          transformOrigin: "50% 50%",
+          ...style,
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+ChevronUpIcon.displayName = "ChevronUpIcon"

package/template/src/admin/components/tiptap-icons/close-icon.tsx

@@ -0,0 +1,24 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const CloseIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+CloseIcon.displayName = "CloseIcon"

package/template/src/admin/components/tiptap-icons/code-block-icon.tsx

@@ -0,0 +1,38 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const CodeBlockIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.70711 2.29289C7.09763 2.68342 7.09763 3.31658 6.70711 3.70711L4.41421 6L6.70711 8.29289C7.09763 8.68342 7.09763 9.31658 6.70711 9.70711C6.31658 10.0976 5.68342 10.0976 5.29289 9.70711L2.29289 6.70711C1.90237 6.31658 1.90237 5.68342 2.29289 5.29289L5.29289 2.29289C5.68342 1.90237 6.31658 1.90237 6.70711 2.29289Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.2929 2.29289C10.6834 1.90237 11.3166 1.90237 11.7071 2.29289L14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L11.7071 9.70711C11.3166 10.0976 10.6834 10.0976 10.2929 9.70711C9.90237 9.31658 9.90237 8.68342 10.2929 8.29289L12.5858 6L10.2929 3.70711C9.90237 3.31658 9.90237 2.68342 10.2929 2.29289Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17 4C17 3.44772 17.4477 3 18 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V12C2 11.4477 2.44772 11 3 11C3.55228 11 4 11.4477 4 12V18C4 18.5523 4.44772 19 5 19H19C19.5523 19 20 18.5523 20 18V6C20 5.44772 19.5523 5 19 5H18C17.4477 5 17 4.55228 17 4Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+CodeBlockIcon.displayName = "CodeBlockIcon"

package/template/src/admin/components/tiptap-icons/code2-icon.tsx

@@ -0,0 +1,32 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const Code2Icon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M15.4545 4.2983C15.6192 3.77115 15.3254 3.21028 14.7983 3.04554C14.2712 2.88081 13.7103 3.1746 13.5455 3.70175L8.54554 19.7017C8.38081 20.2289 8.6746 20.7898 9.20175 20.9545C9.72889 21.1192 10.2898 20.8254 10.4545 20.2983L15.4545 4.2983Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.70711 7.29289C7.09763 7.68342 7.09763 8.31658 6.70711 8.70711L3.41421 12L6.70711 15.2929C7.09763 15.6834 7.09763 16.3166 6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L18.7071 16.7071C18.3166 17.0976 17.6834 17.0976 17.2929 16.7071C16.9024 16.3166 16.9024 15.6834 17.2929 15.2929L20.5858 12L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+Code2Icon.displayName = "Code2Icon"