clippingkk / web / #1178

import type { EditorThemeClasses } from 'lexical'

export const LexicalTheme: EditorThemeClasses = {

  text: {

    underline: 'underline decoration-2 underline-offset-2',

    bold: 'font-semibold',

    italic: 'italic',

    strikethrough: 'line-through opacity-70',

    code: 'px-1.5 py-0.5 mx-0.5 bg-gray-100 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-md font-mono text-sm text-blue-600 dark:text-blue-400',

    subscript: 'text-xs align-sub',

    superscript: 'text-xs align-super',

  },

  link: 'text-blue-400 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 underline underline-offset-2 decoration-1 cursor-pointer transition-colors duration-200',

  quote:

    'my-4 pl-4 py-2 border-l-4 border-blue-400 bg-gray-50 dark:bg-zinc-800/50 rounded-r-lg italic text-gray-700 dark:text-zinc-300',

  list: {

    ol: 'list-decimal list-inside ml-2 space-y-1',

    ul: 'list-disc list-inside ml-2 space-y-1',

    listitem: 'my-1 text-gray-700 dark:text-zinc-300',

    listitemChecked: 'my-1 text-gray-500 dark:text-zinc-500 line-through',

    listitemUnchecked: 'my-1 text-gray-700 dark:text-zinc-300',

    nested: {

      listitem: 'ml-6',

    },

  },

  table: 'my-4 w-full border-collapse overflow-hidden rounded-lg shadow-sm',

  tableCell:

    'px-4 py-2 border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800',

  tableCellHeader:

    'px-4 py-2 border border-gray-200 dark:border-zinc-700 bg-gray-100 dark:bg-zinc-700 font-semibold text-gray-900 dark:text-zinc-50',

  tableRow:

    'hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colors duration-200',

  tableSelected: 'outline outline-2 outline-blue-400 outline-offset-[-2px]',

  tableCellSelected: 'bg-blue-50 dark:bg-blue-900/20',

  tableCellActionButton:

    'w-5 h-5 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded hover:bg-gray-100 dark:hover:bg-zinc-600 cursor-pointer',

  tableCellActionButtonContainer: 'absolute right-1 top-1 z-10',

  tableCellEditing: 'shadow-inner outline outline-2 outline-blue-400',

  tableCellPrimarySelected: 'bg-blue-100 dark:bg-blue-900/30',

  tableCellResizer:

    'absolute right-0 top-0 bottom-0 w-1 cursor-col-resize bg-blue-400 opacity-0 hover:opacity-100 transition-opacity',

  tableColumnSortedIndicator: 'ml-1 inline-block',

  tableAddColumns:

    'absolute -right-4 top-0 bottom-0 w-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-700',

  tableAddRows:

    'absolute -bottom-4 left-0 right-0 h-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-700',

  code: 'rounded-lg font-mono text-sm overflow-x-auto',

  codeHighlight: {

    atrule: 'text-purple-600 dark:text-purple-400',

    attr: 'text-yellow-600 dark:text-yellow-400',

    boolean: 'text-purple-600 dark:text-purple-400',

    builtin: 'text-cyan-600 dark:text-cyan-400',

    cdata: 'text-gray-600 dark:text-zinc-400',

    char: 'text-green-600 dark:text-green-400',

    class: 'text-yellow-600 dark:text-yellow-400',

    'class-name': 'text-yellow-600 dark:text-yellow-400',

    comment: 'text-gray-500 dark:text-zinc-500 italic',

    constant: 'text-purple-600 dark:text-purple-400',

    deleted: 'text-red-600 dark:text-red-400',

    doctype: 'text-gray-600 dark:text-zinc-400',

    entity: 'text-red-600 dark:text-red-400',

    function: 'text-blue-600 dark:text-blue-400',

    important: 'text-red-600 dark:text-red-400 font-bold',

    inserted: 'text-green-600 dark:text-green-400',

    keyword: 'text-purple-600 dark:text-purple-400',

    namespace: 'text-purple-600 dark:text-purple-400',

    number: 'text-green-600 dark:text-green-400',

    operator: 'text-gray-700 dark:text-zinc-300',

    prolog: 'text-gray-600 dark:text-zinc-400',

    property: 'text-blue-600 dark:text-blue-400',

    punctuation: 'text-gray-600 dark:text-zinc-400',

    regex: 'text-red-600 dark:text-red-400',

    selector: 'text-green-600 dark:text-green-400',

    string: 'text-green-600 dark:text-green-400',

    symbol: 'text-purple-600 dark:text-purple-400',

    tag: 'text-red-600 dark:text-red-400',

    url: 'text-cyan-600 dark:text-cyan-400',

    variable: 'text-red-600 dark:text-red-400',

  },

  paragraph: 'my-3 leading-relaxed text-gray-700 dark:text-zinc-300',

  heading: {

    h1: 'text-3xl font-bold my-6 text-gray-900 dark:text-zinc-50',

    h2: 'text-2xl font-bold my-5 text-gray-900 dark:text-zinc-50',

    h3: 'text-xl font-semibold my-4 text-gray-900 dark:text-zinc-50',

    h4: 'text-lg font-semibold my-3 text-gray-900 dark:text-zinc-50',

    h5: 'text-base font-semibold my-2 text-gray-900 dark:text-zinc-50',

    h6: 'text-sm font-semibold my-2 text-gray-900 dark:text-zinc-50',

  },

  hashtag:

    'bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 px-2 py-1 rounded-full text-sm font-medium',

  hr: 'my-6 border-0 h-px bg-gray-200 dark:bg-zinc-700',

  hrSelected: 'outline outline-2 outline-blue-400 outline-offset-2',

  image: 'max-w-full h-auto rounded-lg my-4',

  inlineImage: 'inline-block max-w-full h-auto align-middle mx-1',

  mark: 'bg-yellow-200 dark:bg-yellow-900/50 px-1 rounded',

  markOverlap: 'bg-yellow-300 dark:bg-yellow-800/70',

  indent: 'ml-8',

  ltr: 'text-left',

  rtl: 'text-right',

  autocomplete:

    'absolute z-50 mt-1 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-lg max-h-60 overflow-y-auto',

  blockCursor: 'absolute bg-black dark:bg-white opacity-50 animate-pulse',

  characterLimit: 'text-red-600 dark:text-red-400',

  embedBlock: {

    base: 'relative my-4',

    focus: 'outline outline-2 outline-blue-400 outline-offset-2',

  },

  layoutContainer: 'grid gap-4 my-4',

  layoutItem: 'border border-gray-200 dark:border-zinc-700 rounded-lg p-4',

  tab: 'ml-8',

}