marksmith 0.0.11 → 0.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5eb26aeaa24188df02fdfaa2f3eccaecc28feac32420ff31e34328359b7939c8
-  data.tar.gz: e5ae028f87a6c7bceeea0ac89269e320422d1466dd3b3de17d1c7dade9c49b0d
+  metadata.gz: 6223365f49536a9ee694cd03965e95e7ad4678f1baf8c2d5b8326b4e255f3c14
+  data.tar.gz: 300bf849b18a10fd9acedddfcfdff606e207d923d0aa9faa7f29a5e0a5703c46
 SHA512:
-  metadata.gz: 578c3ed2d9ee8c3d58499f5c08edd8b469166f45f98c7b746912a95c04e780b5c310610ec6b83330253e924706827e9c6ae633fadd2f9e7347b2d1f084f0f017
-  data.tar.gz: 9c4f92ce4997de77e065a9906994dbb4eb611f79648fa4acefcf61f83a02dded7c6a9b9203815f72dbedfb824ad38c9824f79004641133a1352554db5263d5e1
+  metadata.gz: 10a5f5e0597d1a1c4f6119e09919833d56878a94fb96dc6d50e3ca7ebc2396a8f3afdd073f9c06c2b066b185f9d22456d8f85835400b581177a440e3bc6af2cd
+  data.tar.gz: c94d8651053d3870af6ba50eabbf9d4147098a47b22e16b2341307d4074edc4118ee0c923cf58ee0eb5c326c9ce8f807d74d5ec92ce6d8f250c89df2ef572951

data/README.md

@@ -50,9 +50,9 @@ npm install @avo-hq/marksmith
 Import and register it in your application.
 
 ```js
-import Marksmith from '@avo-hq/marksmith'
+import { MarksmithController } from '@avo-hq/marksmith'
 
-application.register('marksmith', Marksmith)
+application.register('marksmith', MarksmithController)
 ```
 
 > [!NOTE]
@@ -61,9 +61,9 @@ application.register('marksmith', Marksmith)
 
 ```js
 // Import just the controller
-import Marksmith from '@avo-hq/marksmith/controller'
+import { MarksmithController } from '@avo-hq/marksmith/core'
 
-application.register('marksmith', Marksmith)
+application.register('marksmith', MarksmithController)
 
 // Manually import Marksmith's dependencies
 import '@github/markdown-toolbar-element'
@@ -102,6 +102,20 @@ It supports basic styles for headings, `strong`, `italic` and others.
 
 The field supports Actve Storage uploads using drag and drop and pasting files into the field.
 
+## List continuation
+
+Marksmith has this great opt-in feature where you can have your lists continued.
+We need to add the `ListContinuation` controller too.
+
+```js
+import { ListContinuationController, MarksmithController } from '@avo-hq/marksmith'
+// or /core for the no-dependencies version
+import { ListContinuationController, MarksmithController } from '@avo-hq/marksmith/core'
+
+application.register('marksmith', MarksmithController)
+application.register('list-continuation', ListContinuationController)
+```
+
 ## Contributing
 
 Contribution directions go here.

data/app/assets/images/marksmith/svgs/markdown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="800px" height="800px" viewBox="0 0 24 24" role="img"><script xmlns="" src="chrome-extension://hoklmmgfnpapgjgcpechhaamimifchmp/frame_ant/frame_ant.js"/><title>Markdown icon</title><path d="M22.269 19.385H1.731a1.73 1.73 0 0 1-1.73-1.73V6.345a1.73 1.73 0 0 1 1.73-1.73h20.538a1.73 1.73 0 0 1 1.73 1.73v11.308a1.73 1.73 0 0 1-1.73 1.731zm-16.5-3.462v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.461v7.847zM21.231 12h-2.308V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>

data/app/assets/images/marksmith/svgs/paperclip.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+</svg>

data/app/assets/stylesheets/marksmith.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.0.0-beta.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
 :root {
   --ms-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
@@ -801,18 +801,31 @@
   width: calc(var(--ms-spacing) * 4);
   height: calc(var(--ms-spacing) * 4);
 }
+.ms\:size-full {
+  width: 100%;
+  height: 100%;
+}
 .ms\:w-full {
   width: 100%;
 }
+.ms\:max-w-none {
+  max-width: none;
+}
 .ms\:flex-1 {
   flex: 1;
 }
+.ms\:flex-grow {
+  flex-grow: 1;
+}
 .ms\:grow {
   flex-grow: 1;
 }
 .ms\:cursor-pointer {
   cursor: pointer;
 }
+.ms\:resize-y {
+  resize: vertical;
+}
 .ms\:flex-col {
   flex-direction: column;
 }
@@ -822,9 +835,22 @@
 .ms\:flex-wrap {
   flex-wrap: wrap;
 }
+.ms\:items-center {
+  align-items: center;
+}
+.ms\:gap-x-2 {
+  column-gap: calc(var(--ms-spacing) * 2);
+}
 .ms\:gap-y-1 {
   row-gap: calc(var(--ms-spacing) * 1);
 }
+.ms\:space-x-2 {
+  :where(& > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--ms-spacing) * 2) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--ms-spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+  }
+}
 .ms\:rounded {
   border-radius: 0.25rem;
 }
@@ -844,18 +870,27 @@
   --tw-border-style: none;
   border-style: none;
 }
-.ms\:border-zinc-300 {
-  border-color: var(--ms-color-zinc-300);
+.ms\:border-neutral-300 {
+  border-color: var(--ms-color-neutral-300);
+}
+.ms\:bg-neutral-50 {
+  background-color: var(--ms-color-neutral-50);
 }
-.ms\:bg-zinc-50 {
-  background-color: var(--ms-color-zinc-50);
+.ms\:bg-neutral-200 {
+  background-color: var(--ms-color-neutral-200);
 }
-.ms\:bg-zinc-200 {
-  background-color: var(--ms-color-zinc-200);
+.ms\:bg-transparent {
+  background-color: transparent;
 }
 .ms\:bg-none {
   background-image: none;
 }
+.ms\:p-2 {
+  padding: calc(var(--ms-spacing) * 2);
+}
+.ms\:px-1 {
+  padding-inline: calc(var(--ms-spacing) * 1);
+}
 .ms\:px-1\.5 {
   padding-inline: calc(var(--ms-spacing) * 1.5);
 }
@@ -871,56 +906,109 @@
 .ms\:py-2 {
   padding-block: calc(var(--ms-spacing) * 2);
 }
-.ms\:prose-zinc {
-  --tw-prose-body: oklch(0.37 0.013 285.805);
-  --tw-prose-headings: oklch(0.21 0.006 285.885);
-  --tw-prose-lead: oklch(0.442 0.017 285.786);
-  --tw-prose-links: oklch(0.21 0.006 285.885);
-  --tw-prose-bold: oklch(0.21 0.006 285.885);
-  --tw-prose-counters: oklch(0.552 0.016 285.938);
-  --tw-prose-bullets: oklch(0.871 0.006 286.286);
-  --tw-prose-hr: oklch(0.92 0.004 286.32);
-  --tw-prose-quotes: oklch(0.21 0.006 285.885);
-  --tw-prose-quote-borders: oklch(0.92 0.004 286.32);
-  --tw-prose-captions: oklch(0.552 0.016 285.938);
-  --tw-prose-kbd: oklch(0.21 0.006 285.885);
+.ms\:py-px {
+  padding-block: 1px;
+}
+.ms\:font-mono {
+  font-family: var(--ms-font-mono);
+}
+.ms\:font-sans {
+  font-family: var(--ms-font-sans);
+}
+.ms\:text-sm {
+  font-size: var(--ms-text-sm);
+  line-height: var(--tw-leading, var(--ms-text-sm--line-height));
+}
+.ms\:text-xs {
+  font-size: var(--ms-text-xs);
+  line-height: var(--tw-leading, var(--ms-text-xs--line-height));
+}
+.ms\:font-semibold {
+  --tw-font-weight: var(--ms-font-weight-semibold);
+  font-weight: var(--ms-font-weight-semibold);
+}
+.ms\:text-neutral-600 {
+  color: var(--ms-color-neutral-600);
+}
+.ms\:text-neutral-800 {
+  color: var(--ms-color-neutral-800);
+}
+.ms\:uppercase {
+  text-transform: uppercase;
+}
+.ms\:no-underline {
+  text-decoration-line: none;
+}
+.ms\:prose-neutral {
+  --tw-prose-body: oklch(0.371 0 0);
+  --tw-prose-headings: oklch(0.205 0 0);
+  --tw-prose-lead: oklch(0.439 0 0);
+  --tw-prose-links: oklch(0.205 0 0);
+  --tw-prose-bold: oklch(0.205 0 0);
+  --tw-prose-counters: oklch(0.556 0 0);
+  --tw-prose-bullets: oklch(0.87 0 0);
+  --tw-prose-hr: oklch(0.922 0 0);
+  --tw-prose-quotes: oklch(0.205 0 0);
+  --tw-prose-quote-borders: oklch(0.922 0 0);
+  --tw-prose-captions: oklch(0.556 0 0);
+  --tw-prose-kbd: oklch(0.205 0 0);
   --tw-prose-kbd-shadows: NaN NaN NaN;
-  --tw-prose-code: oklch(0.21 0.006 285.885);
-  --tw-prose-pre-code: oklch(0.92 0.004 286.32);
-  --tw-prose-pre-bg: oklch(0.274 0.006 286.033);
-  --tw-prose-th-borders: oklch(0.871 0.006 286.286);
-  --tw-prose-td-borders: oklch(0.92 0.004 286.32);
-  --tw-prose-invert-body: oklch(0.871 0.006 286.286);
+  --tw-prose-code: oklch(0.205 0 0);
+  --tw-prose-pre-code: oklch(0.922 0 0);
+  --tw-prose-pre-bg: oklch(0.269 0 0);
+  --tw-prose-th-borders: oklch(0.87 0 0);
+  --tw-prose-td-borders: oklch(0.922 0 0);
+  --tw-prose-invert-body: oklch(0.87 0 0);
   --tw-prose-invert-headings: #fff;
-  --tw-prose-invert-lead: oklch(0.705 0.015 286.067);
+  --tw-prose-invert-lead: oklch(0.708 0 0);
   --tw-prose-invert-links: #fff;
   --tw-prose-invert-bold: #fff;
-  --tw-prose-invert-counters: oklch(0.705 0.015 286.067);
-  --tw-prose-invert-bullets: oklch(0.442 0.017 285.786);
-  --tw-prose-invert-hr: oklch(0.37 0.013 285.805);
-  --tw-prose-invert-quotes: oklch(0.967 0.001 286.375);
-  --tw-prose-invert-quote-borders: oklch(0.37 0.013 285.805);
-  --tw-prose-invert-captions: oklch(0.705 0.015 286.067);
+  --tw-prose-invert-counters: oklch(0.708 0 0);
+  --tw-prose-invert-bullets: oklch(0.439 0 0);
+  --tw-prose-invert-hr: oklch(0.371 0 0);
+  --tw-prose-invert-quotes: oklch(0.97 0 0);
+  --tw-prose-invert-quote-borders: oklch(0.371 0 0);
+  --tw-prose-invert-captions: oklch(0.708 0 0);
   --tw-prose-invert-kbd: #fff;
   --tw-prose-invert-kbd-shadows: 255 255 255;
   --tw-prose-invert-code: #fff;
-  --tw-prose-invert-pre-code: oklch(0.871 0.006 286.286);
+  --tw-prose-invert-pre-code: oklch(0.87 0 0);
   --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
-  --tw-prose-invert-th-borders: oklch(0.442 0.017 285.786);
-  --tw-prose-invert-td-borders: oklch(0.37 0.013 285.805);
+  --tw-prose-invert-th-borders: oklch(0.439 0 0);
+  --tw-prose-invert-td-borders: oklch(0.371 0 0);
 }
-.ms\:focus-within\:border-zinc-500 {
+.ms\:focus-within\:border-neutral-400 {
   &:focus-within {
-    border-color: var(--ms-color-zinc-500);
+    border-color: var(--ms-color-neutral-400);
   }
 }
-.ms\:hover\:bg-zinc-200 {
+.ms\:hover\:bg-neutral-100 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--ms-color-zinc-200);
+      background-color: var(--ms-color-neutral-100);
     }
   }
 }
+.ms\:hover\:bg-neutral-200 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--ms-color-neutral-200);
+    }
+  }
+}
+.ms\:hover\:bg-neutral-300 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--ms-color-neutral-300);
+    }
+  }
+}
+.ms\:focus\:ring-0 {
+  &:focus {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+}
 .ms\:focus\:outline-none {
   &:focus {
     --tw-outline-style: none;
@@ -932,6 +1020,45 @@
     flex-direction: row;
   }
 }
+.ms\:button-spinner {
+  width: 24px;
+  height: 24px;
+  position: relative;
+}
+.ms\:button-spinner > .double-bounce1, .ms\:button-spinner > .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.5;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+.ms\:button-spinner > .double-bounce2 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+@-webkit-keyframes sk-bounce {
+  0%, 100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -958,8 +1085,72 @@
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}

data/app/frontend/entrypoints/application.css

@@ -9,3 +9,54 @@
 @plugin "@tailwindcss/typography";
 
 @source "./../../views/";
+@source "./../../helpers/";
+@source "./../../../lib/";
+
+.ms\:button-spinner {
+  width: 24px;
+  height: 24px;
+
+  position: relative;
+}
+
+.ms\:button-spinner > .double-bounce1,
+.ms\:button-spinner > .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.5;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+
+.ms\:button-spinner > .double-bounce2 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes sk-bounce {
+  0%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}

data/app/frontend/entrypoints/javascript/controllers/export.js

@@ -0,0 +1,6 @@
+import MarksmithController from "./marksmith_controller"
+import ListContinuationController from "./list_continuation_controller"
+
+export { MarksmithController, ListContinuationController }
+
+

data/app/frontend/entrypoints/javascript/controllers/list_continuation_controller.js

@@ -0,0 +1,94 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    this.isInsertLineBreak = false
+    this.isProcessing = false  // Guard flag to prevent recursion
+
+    this.SPACE_PATTERN = /^(\s*)?/
+    this.LIST_PATTERN = /^(\s*)([*-]|(\d+)\.)\s(\[[\sx]\]\s)?/
+  }
+
+  handleBeforeInput(event) {
+    if (this.isProcessing) return
+    this.isInsertLineBreak = event.inputType === 'insertLineBreak'
+  }
+
+  handleInput(event) {
+    if (this.isProcessing) return
+    if (this.isInsertLineBreak || event.inputType === 'insertLineBreak') {
+      this.handleListContinuation(event.target)
+      this.isInsertLineBreak = false
+    }
+  }
+
+  handleListContinuation(textarea) {
+    if (this.isProcessing) return
+
+    const result = this.analyzeCurrentLine(
+      textarea.value,
+      [textarea.selectionStart, textarea.selectionEnd],
+    )
+
+    if (result !== undefined) {
+      this.isProcessing = true
+      try {
+        this.applyTextChange(textarea, result)
+      } finally {
+        // Ensure we always reset the processing flag
+        setTimeout(() => {
+          this.isProcessing = false
+        }, 0)
+      }
+    }
+  }
+
+  analyzeCurrentLine(text, [cursorPosition]) {
+    if (!cursorPosition || !text) return
+
+    // Get all lines up to cursor
+    const lines = text.substring(0, cursorPosition).split('\n')
+    const previousLine = lines[lines.length - 2]
+
+    // If no previous line or doesn't match list pattern, do nothing
+    const match = previousLine?.match(this.LIST_PATTERN)
+    if (!match) return
+
+    const [fullMatch, indentation, listMarker, number, checkbox] = match
+
+    // Check if previous line was empty (just list marker)
+    const previousContent = previousLine.replace(fullMatch, '').trim()
+    if (previousContent.length === 0) {
+      // Terminate the list by removing the marker
+      const start = cursorPosition - `\n${fullMatch}`.length
+
+      return {
+        text: text.substring(0, start) + text.substring(cursorPosition),
+        selection: [start, start],
+        operation: 'delete',
+      }
+    }
+
+    // For numbered lists, increment the number
+    const newMarker = number ? `${parseInt(number, 10) + 1}.` : listMarker
+
+    // Maintain checkbox if it was present
+    const prefix = `${indentation}${newMarker} ${checkbox ? '[ ] ' : ''}`
+
+    // Continue the list with the same indentation and style
+    return {
+      text: text.substring(0, cursorPosition) + prefix + text.substring(cursorPosition),
+      selection: [cursorPosition + prefix.length, cursorPosition + prefix.length],
+      operation: 'insert',
+    }
+  }
+
+  applyTextChange(textarea, { text, selection }) {
+    // Set new value directly
+    textarea.value = text
+    // Set the cursor position
+    const [start, end] = selection
+    textarea.selectionStart = start
+    textarea.selectionEnd = end
+  }
+}

data/app/frontend/entrypoints/javascript/controllers/marksmith_controller.js

@@ -17,10 +17,10 @@ export default class extends Controller {
     fieldId: String,
   }
 
-  static targets = ['fieldElement', 'previewElement', 'writeTabButton', 'previewTabButton', 'toolbar']
+  static targets = ['fieldContainer', 'fieldElement', 'previewElement', 'writeTabButton', 'previewTabButton', 'toolbar']
 
   connect() {
-    subscribe(this.fieldElementTarget, { defaultPlainTextPaste: { urlLinks: true } })
+    subscribe(this.fieldContainerTarget, { defaultPlainTextPaste: { urlLinks: true } })
   }
 
   switchToWrite(event) {
@@ -31,7 +31,7 @@ export default class extends Controller {
     this.previewTabButtonTarget.classList.remove('ms:hidden')
 
     // toggle write/preview buttons
-    this.fieldElementTarget.classList.remove('ms:hidden')
+    this.fieldContainerTarget.classList.remove('ms:hidden')
     this.previewElementTarget.classList.add('ms:hidden')
 
     // toggle the toolbar back
@@ -58,7 +58,7 @@ export default class extends Controller {
     this.previewTabButtonTarget.classList.add('ms:hidden')
 
     // toggle elements
-    this.fieldElementTarget.classList.add('ms:hidden')
+    this.fieldContainerTarget.classList.add('ms:hidden')
     this.previewElementTarget.classList.remove('ms:hidden')
 
     // toggle the toolbar
@@ -77,6 +77,21 @@ export default class extends Controller {
     this.uploadFiles(event.clipboardData.files)
   }
 
+  buttonUpload(event) {
+    event.preventDefault()
+    // Create a hidden file input and trigger it
+    const fileInput = document.createElement('input')
+    fileInput.type = 'file'
+    fileInput.multiple = true
+    fileInput.accept = 'image/*,.pdf,.doc,.docx,.txt'
+
+    fileInput.addEventListener('change', (e) => {
+      this.uploadFiles(e.target.files)
+    })
+
+    fileInput.click()
+  }
+
   uploadFiles(files) {
     Array.from(files).forEach((file) => this.uploadFile(file))
   }

data/app/views/marksmith/shared/_editor.html.erb

@@ -6,6 +6,7 @@
   style = local_assigns[:style] || nil
   classes = local_assigns[:class] || nil
   rows = local_assigns[:rows] || 15
+  field_name = form&.field_name(name) || name
   value = if defined?(form)
     form.object.send(name)
   else
@@ -14,21 +15,25 @@
   extra_preview_params = local_assigns[:extra_preview_params] || {}
 %>
 <%= content_tag :div,
-  class: "ms:flex ms:flex-col ms:w-full ms:border ms:border-zinc-300 ms:rounded ms:@container ms:group ms:focus-within:border-zinc-500",
+  class: "ms:flex ms:flex-col ms:w-full ms:border ms:border-neutral-300 ms:rounded ms:@container ms:group ms:focus-within:border-neutral-400",
   data: {
-    controller: "marksmith",
+    controller: "marksmith list-continuation",
+    action: "
+      beforeinput->list-continuation#handleBeforeInput
+      input->list-continuation#handleInput
+    ",
     marksmith_preview_url_value: marksmith.markdown_previews_path,
     marksmith_active_tab_class: "bg-white",
     marksmith_attach_url_value: main_app.rails_direct_uploads_url,
     marksmith_extra_preview_params_value: extra_preview_params.as_json,
   } do %>
-  <% toggle_button_classes = class_names(marksmith_button_classes, "ms:border-0 ms:bg-none") %>
-  <div class="ms:flex-1 ms:flex-col-reverse ms:@md:flex-row ms:grow ms:flex  ms:justify-bewteen ms:bg-zinc-50 ms:rounded ms:px-2 ms:py-1 ms:gap-y-1">
+  <% toggle_button_classes = class_names(marksmith_button_classes, "ms:bg-neutral-200 ms:border-0 ms:bg-none ms:text-sm ms:hover:bg-neutral-300 ms:uppercase ms:text-xs ms:font-semibold ms:text-neutral-800") %>
+  <div class="ms:flex-1 ms:flex-col-reverse ms:@md:flex-row ms:grow ms:flex  ms:justify-bewteen ms:bg-neutral-50 ms:rounded ms:px-2 ms:py-1 ms:gap-y-1">
     <div class="ms:flex-1 ms:flex ms:items:center">
-      <button class="<%= toggle_button_classes %>" data-action="click->marksmith#switchToPreview" data-marksmith-target="previewTabButton">
+      <button class="<%= toggle_button_classes %>" data-action="click->marksmith#switchToPreview" data-marksmith-target="previewTabButton" type="button">
         <%= t('marksmith.preview').humanize %>
       </button>
-      <button class="<%= toggle_button_classes %> ms:hidden ms:bg-zinc-200" data-action="click->marksmith#switchToWrite" data-marksmith-target="writeTabButton">
+      <button class="<%= toggle_button_classes %> ms:hidden ms:bg-neutral-200" data-action="click->marksmith#switchToWrite" data-marksmith-target="writeTabButton" type="button">
         <%= t('marksmith.write').humanize %>
       </button>
     </div>
@@ -46,29 +51,39 @@
       <%= marksmith_toolbar_button "task-list" %>
     </markdown-toolbar>
   </div>
-
-  <div class="ms:border-t ms:border-zinc-300 ms:flex">
-    <%= text_area_tag name, value,
-      id: name,
-      class: class_names("ms:flex ms:flex-1 ms:rounded ms:border-none ms:py-2 ms:px-3  ms:focus:outline-none", classes),
-      rows: rows,
-      data: {
-        marksmith_target: "fieldElement",
-        action: "drop->marksmith#dropUpload paste->marksmith#pasteUpload",
-        **data_attributes
-      },
-      disabled:,
-      placeholder:,
-      autofocus:,
-      style:
-    %>
+  <% toolbar_button_classes = "ms:cursor-pointer ms:hover:bg-neutral-100 ms:px-1 ms:py-px ms:rounded ms:text-sm" %>
+  <div class="ms:border-t ms:border-neutral-300 ms:flex">
+    <%= content_tag :div, class: "ms:flex ms:flex-col ms:size-full", data: { marksmith_target: "fieldContainer" } do %>
+      <%= text_area_tag field_name, value,
+        id: name,
+        class: class_names("ms:flex ms:flex-1 ms:rounded ms:border-none ms:p-2 ms:resize-y ms:focus:outline-none ms:font-mono ms:focus:ring-0", classes),
+        rows: rows,
+        data: {
+          action: "drop->marksmith#dropUpload paste->marksmith#pasteUpload",
+          marksmith_target: "fieldElement",
+          **data_attributes
+        },
+        disabled:,
+        placeholder:,
+        autofocus:,
+        style:
+      %>
+      <div class="ms:flex ms:w-full ms:flex-1 ms:flex-grow ms:space-x-2 ms:py-1 ms:border-t ms:border-neutral-300 ms:px-2 ms:font-sans ms:text-sm">
+        <%= link_to "https://docs.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax", target: "_blank", class: class_names("ms:flex ms:items-center ms:gap-x-2 ms:text-neutral-800 ms:no-underline", toolbar_button_classes) do %>
+          <%= image_tag asset_path("marksmith/svgs/markdown.svg"), class: "ms:inline ms:size-4" %> <%= t("marksmith.markdown_is_supported").humanize %>
+        <% end %>
+        <%= button_tag data: { action: "click->marksmith#buttonUpload" }, class: class_names("ms:bg-none ms:border-none ms:bg-transparent ms:text-neutral-600 ms:items-center ms:flex", toolbar_button_classes) do %>
+          <%= image_tag asset_path("marksmith/svgs/paperclip.svg"), class: "ms:inline ms:size-4" %> <%= t("marksmith.attach_files").humanize %>
+        <% end %>
+      </div>
+    <% end %>
     <%= content_tag :div,
-      class: "ms:hidden ms:markdown-preview",
+      class: "ms:hidden ms:markdown-preview ms:size-full ms:flex-1 ms:flex ms:size-full",
       id: "markdown-preview-#{name}",
       data: {
         marksmith_target: "previewElement",
       } do %>
-      <div class="button-spinner">
+      <div class="ms:button-spinner">
         <div class="double-bounce1"></div>
         <div class="double-bounce2"></div>
       </div>

data/app/views/marksmith/shared/_rendered_body.html.erb

@@ -1,3 +1,3 @@
-<%= content_tag :div, class: "ms:prose ms:prose-zinc" do %>
+<%= content_tag :div, class: "ms:prose ms:prose-neutral ms:max-w-none" do %>
   <%= sanitize(body, tags: %w(table th tr td span) + ActionView::Helpers::SanitizeHelper.sanitizer_vendor.safe_list_sanitizer.allowed_tags.to_a) %>
 <% end %>

data/config/locales/marksmith.en.yml

@@ -30,12 +30,14 @@
 
 en:
   marksmith:
+    attach_files: attach files
     bold: bold
     code: code
     header: header
     image: image
     italic: italic
     link: link
+    markdown_is_supported: Markdown is supported
     ordered_list: ordered list
     preview: preview
     quote: quote

data/lib/marksmith/helper.rb

@@ -14,7 +14,7 @@ module Marksmith
     end
 
     def marksmith_button_classes
-      class_names("ms:flex ms:items:center ms:cursor-pointer ms:py-1 ms:px-1.5 ms:hover:bg-zinc-200 ms:rounded")
+      class_names("ms:flex ms:items:center ms:cursor-pointer ms:py-1 ms:px-1.5 ms:hover:bg-neutral-200 ms:rounded")
     end
 
     def marksmith_toolbar_button(name, **kwargs)

data/lib/marksmith/version.rb

@@ -1,3 +1,3 @@
 module Marksmith
-  VERSION = "0.0.11"
+  VERSION = "0.0.12"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: marksmith
 version: !ruby/object:Gem::Version
-  version: 0.0.11
+  version: 0.0.12
 platform: ruby
 authors:
 - Adrian Marin
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-22 00:00:00.000000000 Z
+date: 2025-01-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -58,7 +58,9 @@ files:
 - app/assets/images/marksmith/svgs/italic.svg
 - app/assets/images/marksmith/svgs/link copy.svg
 - app/assets/images/marksmith/svgs/link.svg
+- app/assets/images/marksmith/svgs/markdown.svg
 - app/assets/images/marksmith/svgs/ordered-list.svg
+- app/assets/images/marksmith/svgs/paperclip.svg
 - app/assets/images/marksmith/svgs/quote.svg
 - app/assets/images/marksmith/svgs/task-list.svg
 - app/assets/images/marksmith/svgs/unordered-list.svg
@@ -69,7 +71,9 @@ files:
 - app/frontend/entrypoints/application.css
 - app/frontend/entrypoints/application.js
 - app/frontend/entrypoints/javascript/controllers/application.js
+- app/frontend/entrypoints/javascript/controllers/export.js
 - app/frontend/entrypoints/javascript/controllers/index.js
+- app/frontend/entrypoints/javascript/controllers/list_continuation_controller.js
 - app/frontend/entrypoints/javascript/controllers/marksmith_controller.js
 - app/helpers/marksmith/application_helper.rb
 - app/jobs/marksmith/application_job.rb