feat: feedback (#156)

* minimal tiptap

* wip

* img edit block

* wip

* fix

web/components/minimal-tiptap/styles/partials/code.css

@@ -0,0 +1,86 @@
+.minimal-tiptap-editor .ProseMirror code.inline {
+  @apply rounded border border-[var(--mt-code-color)] bg-[var(--mt-code-background)] px-1 py-0.5 text-sm;
+}
+
+.minimal-tiptap-editor .ProseMirror pre {
+  @apply relative overflow-auto rounded border font-mono text-sm;
+  @apply border-[var(--mt-pre-border)] bg-[var(--mt-pre-background)] text-[var(--mt-pre-color)];
+  @apply hyphens-none whitespace-pre text-left;
+}
+
+.minimal-tiptap-editor .ProseMirror code {
+  @apply break-words leading-[1.7em];
+}
+
+.minimal-tiptap-editor .ProseMirror pre code {
+  @apply block overflow-x-auto p-3.5;
+}
+
+.minimal-tiptap-editor .ProseMirror pre {
+  .hljs-keyword,
+  .hljs-operator,
+  .hljs-function,
+  .hljs-built_in,
+  .hljs-builtin-name {
+    color: var(--hljs-keyword);
+  }
+
+  .hljs-attr,
+  .hljs-symbol,
+  .hljs-property,
+  .hljs-attribute,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-params {
+    color: var(--hljs-attr);
+  }
+
+  .hljs-name,
+  .hljs-regexp,
+  .hljs-link,
+  .hljs-type,
+  .hljs-addition {
+    color: var(--hljs-name);
+  }
+
+  .hljs-string,
+  .hljs-bullet {
+    color: var(--hljs-string);
+  }
+
+  .hljs-title,
+  .hljs-subst,
+  .hljs-section {
+    color: var(--hljs-title);
+  }
+
+  .hljs-literal,
+  .hljs-type,
+  .hljs-deletion {
+    color: var(--hljs-literal);
+  }
+
+  .hljs-selector-tag,
+  .hljs-selector-id,
+  .hljs-selector-class {
+    color: var(--hljs-selector-tag);
+  }
+
+  .hljs-number {
+    color: var(--hljs-number);
+  }
+
+  .hljs-comment,
+  .hljs-meta,
+  .hljs-quote {
+    color: var(--hljs-comment);
+  }
+
+  .hljs-emphasis {
+    @apply italic;
+  }
+
+  .hljs-strong {
+    @apply font-bold;
+  }
+}

web/components/minimal-tiptap/styles/partials/lists.css

@@ -0,0 +1,82 @@
+.minimal-tiptap-editor div.tiptap p {
+  @apply text-[var(--mt-font-size-regular)];
+}
+
+.minimal-tiptap-editor .ProseMirror ol {
+  @apply list-decimal;
+}
+
+.minimal-tiptap-editor .ProseMirror ol ol {
+  list-style: lower-alpha;
+}
+
+.minimal-tiptap-editor .ProseMirror ol ol ol {
+  list-style: lower-roman;
+}
+
+.minimal-tiptap-editor .ProseMirror ul {
+  list-style: disc;
+}
+
+.minimal-tiptap-editor .ProseMirror ul ul {
+  list-style: circle;
+}
+
+.minimal-tiptap-editor .ProseMirror ul ul ul {
+  list-style: square;
+}
+
+.minimal-tiptap-editor .ProseMirror ul[data-type='taskList'] {
+  @apply list-none pl-1;
+}
+
+.minimal-tiptap-editor .ProseMirror ul[data-type='taskList'] p {
+  @apply m-0;
+}
+
+.minimal-tiptap-editor .ProseMirror ul[data-type='taskList'] li > label {
+  @apply mr-2 mt-0.5 flex-none select-none;
+}
+
+.minimal-tiptap-editor .ProseMirror li[data-type='taskItem'] {
+  @apply flex flex-row items-start;
+}
+
+.minimal-tiptap-editor .ProseMirror li[data-type='taskItem'] .taskItem-checkbox-container {
+  @apply relative pr-2;
+}
+
+.minimal-tiptap-editor .ProseMirror .taskItem-drag-handle {
+  @apply absolute -left-5 top-1.5 h-[18px] w-[18px] cursor-move pl-0.5 text-[var(--mt-secondary)] opacity-0;
+}
+
+.minimal-tiptap-editor
+  .ProseMirror
+  li[data-type='taskItem']:hover:not(:has(li:hover))
+  > .taskItem-checkbox-container
+  > .taskItem-drag-handle {
+  @apply opacity-100;
+}
+
+.minimal-tiptap-editor .ProseMirror .taskItem-drag-handle:hover {
+  @apply text-[var(--mt-drag-handle-hover)];
+}
+
+.minimal-tiptap-editor .ProseMirror .taskItem-checkbox {
+  fill-opacity: 0;
+  @apply h-3.5 w-3.5 flex-shrink-0 cursor-pointer select-none appearance-none rounded border border-solid border-[var(--mt-secondary)] bg-transparent bg-[1px_2px] p-0.5 align-middle transition-colors duration-75 ease-out;
+}
+
+.minimal-tiptap-editor .ProseMirror .taskItem-checkbox:checked {
+  @apply border-primary bg-primary bg-no-repeat;
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22%23fbfbfb%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E');
+}
+
+.minimal-tiptap-editor .ProseMirror .taskItem-content {
+  @apply min-w-0 flex-1;
+}
+
+.minimal-tiptap-editor .ProseMirror li[data-checked='true'] .taskItem-content > :not([data-type='taskList']),
+.minimal-tiptap-editor .ProseMirror li[data-checked='true'] .taskItem-content .taskItem-checkbox {
+  @apply opacity-75;
+}

web/components/minimal-tiptap/styles/partials/placeholder.css

@@ -0,0 +1,4 @@
+.minimal-tiptap-editor .ProseMirror > p.is-editor-empty::before {
+  content: attr(data-placeholder);
+  @apply pointer-events-none float-left h-0 text-[var(--mt-secondary)];
+}

web/components/minimal-tiptap/styles/partials/typography.css

@@ -0,0 +1,27 @@
+.minimal-tiptap-editor .ProseMirror .heading-node {
+  @apply relative font-semibold;
+}
+
+.minimal-tiptap-editor .ProseMirror .heading-node:first-child {
+  @apply mt-0;
+}
+
+.minimal-tiptap-editor .ProseMirror h1 {
+  @apply mb-4 mt-[46px] text-[1.375rem] leading-7 tracking-[-0.004375rem];
+}
+
+.minimal-tiptap-editor .ProseMirror h2 {
+  @apply mb-3.5 mt-8 text-[1.1875rem] leading-7 tracking-[0.003125rem];
+}
+
+.minimal-tiptap-editor .ProseMirror h3 {
+  @apply mb-3 mt-6 text-[1.0625rem] leading-6 tracking-[0.00625rem];
+}
+
+.minimal-tiptap-editor .ProseMirror a.link {
+  @apply cursor-pointer text-primary;
+}
+
+.minimal-tiptap-editor .ProseMirror a.link:hover {
+  @apply underline;
+}