prosemirror 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3717422ef93a6f35012d264a8d82b3fe9c2982631d5b2f39a499be9ad2da79a7
-  data.tar.gz: 05af2f5ff65a7a07e0f1134627fd6e4110d089264b9df1ad78f66000c4bda30e
+  metadata.gz: 8aae1987528266c7bd7c4b3c3d8f7c82e74f74cf89ee9e7ac87b1732ff76634d
+  data.tar.gz: d5cb877b264eb0d39cd40cd8b4909ec94b423ac439a6719df23c70eb6cde6182
 SHA512:
-  metadata.gz: 950422c7a48833915def7682efdb216a93c416acbfcb57ea712da29d220280a269d524013cc5bff57c0cc706fa243b7e0cd7080985bc8bd129224f182b1e4c62
-  data.tar.gz: 3914858a0eadcabd1d17dc253259a2c4786cb22332aff14b66c3d8fe89f9ea99de7c0ea4c6e70255fb23b9b992b543bd22bde54fdb2f55dbb6232185ba306168
+  metadata.gz: 947eab5fdc041f059be90be81b94bc66bb1505118b983ed982100faf1ccf2748fdcf753f83384385af72e80cc610473e24eeca31aa6a404ed93f431a8d3138d2
+  data.tar.gz: 4a56748f16cc7ac1af9ad1660518870dfded5f22b089e714417cf74afb970e0ec8b9f53d2d9e1adc82662efac63c449ba1dff10d07988ed8ca110413143c2452

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 ## [Unreleased]
 
+## [0.6.0] - 2026-10-24
+
+- Tiptap's YouTube and Twitch embeds, in `Schema.tiptap`: `youtube` and `twitch`, with the video's URL in `src`, rendered as an iframe of its embed URL, built from the video's id. They are imported from Tiptap's markup, and from iframes of embed URLs without it. Subclasses set Twitch's `parent` domain and YouTube's nocookie host. Markdown export writes a link to the video, or the iframe with `html: true`.
+- Tiptap's details, in `Schema.tiptap`: `details`, `details_summary` and `details_content`, rendered and imported as Tiptap does, including `<details>` without Tiptap's content wrapper. `open`, which Tiptap keeps with `persist: true`, is rendered and imported. Markdown export writes them as `<details>` HTML around Markdown content, as GitHub reads it.
+- `Schema.tiptap(text_align: true)` adds Tiptap's TextAlign extension to headings and paragraphs: a `textAlign` attribute, rendered as a `text-align` style, and imported from it or from the old `align` attribute. Other types get it by including `Prosemirror::TextAlign`.
+- Tiptap's task lists, in `Schema.tiptap`: `task_list` and `task_item`, with a `checked` attribute. They render Tiptap's HTML, and are imported from it and from GitHub's. Markdown import reads GitHub Flavored Markdown task lists: a bullet list whose items all have a checkbox is a task list, and other checkboxes stay as text. Markdown export writes `- [x]` items.
+- Tiptap's mention node, in `Schema.tiptap`: rendered as `<span data-type="mention">@label</span>`, with its `id`, `label` and `mentionSuggestionChar` in `data-` attributes, and imported from that HTML. Its text is `@label`, or `@id` without a label. In Markdown, it's written as text, or as HTML with `html: true`.
+
 ## [0.5.0] - 2026-10-24
 
 - `Document#to_markdown` writes Markdown, with GitHub Flavored Markdown tables and strikethrough, like prosemirror-markdown. Node types write themselves in `to_markdown`, and mark types declare their syntax with `markdown`. `html: true` writes underline, highlight, subscript, superscript and image sizes as HTML.

data/README.md

@@ -109,10 +109,10 @@ bundle add commonmarker
 doc = Prosemirror.from_markdown("## Hello\n\nSome **bold** text.")
 ```
 
-It reads GitHub Flavored Markdown: tables, strikethrough and autolinks. Each Markdown node becomes the element commonmarker renders for it, and the schema's parse rules apply as in HTML import, so custom types can match Markdown too: a type that matches `img` also gets Markdown images. For the built-in types, it gives the same JSON as rendering the Markdown to HTML and importing it in Tiptap, except that:
+It reads GitHub Flavored Markdown: tables, strikethrough, autolinks and task lists. Each Markdown node becomes the element commonmarker renders for it, and the schema's parse rules apply as in HTML import, so custom types can match Markdown too: a type that matches `img` also gets Markdown images. For the built-in types, it gives the same JSON as rendering the Markdown to HTML and importing it in Tiptap, except that:
 
 - code blocks lose their final newline, as in prosemirror-markdown;
-- task list items (`- [ ] todo`) stay as list items starting with `[ ] ` or `[x] `.
+- a bullet list whose items all have a checkbox (`- [ ] todo`) is a task list. In other lists, which Tiptap's task lists can't hold, checkboxes stay as text at the start of their item: `[ ] ` or `[x] `.
 
 Raw HTML in Markdown goes through HTML import when the herb gem is installed, and stays as text otherwise.
 
@@ -120,17 +120,19 @@ YAML front matter, between `---` lines at the start, is dropped. Footnotes aren'
 
 ## Markdown export
 
-`to_markdown` writes the document as Markdown, with GitHub Flavored Markdown for tables and strikethrough, like [prosemirror-markdown](https://github.com/ProseMirror/prosemirror-markdown). It needs no gem.
+`to_markdown` writes the document as Markdown, with GitHub Flavored Markdown for tables, strikethrough and task lists, like [prosemirror-markdown](https://github.com/ProseMirror/prosemirror-markdown). It needs no gem.
 
 ```ruby
 doc.to_markdown              # => "## Hello\n\n**World**\n"
-doc.to_markdown(html: true)  # underline, highlight, subscript and superscript as HTML
+doc.to_markdown(html: true)  # underline, highlight, subscript, superscript and mentions as HTML
 ```
 
 - Text is escaped, so that it reads back as text: `*`, `_`, `[`, a `#` or `-` that would start a block, HTML-like `<b>`, and URLs that GitHub would turn into links.
-- Markdown has no syntax for underline, highlight, subscript, superscript or image sizes: by default, only their text or image is written. With `html: true`, they are written as HTML.
+- Markdown has no syntax for underline, highlight, subscript, superscript, image sizes or mentions: by default, only their text or image is written, like `@Ada` for a mention. With `html: true`, they are written as HTML.
 - Emphasis that CommonMark can't write where it is, like bold on a comma between two letters, is dropped and its text kept.
 - Tables are written as GFM tables. A cell's paragraphs and line breaks are joined with `<br>`, and its other blocks, like lists, are written as HTML.
+- Details are written as `<details>` HTML, as on GitHub, with their content in Markdown.
+- YouTube and Twitch embeds are written as links to the video. With `html: true`, they are written as their iframe.
 - Empty paragraphs are left out.
 
 Importing the Markdown gives the document back, as far as Markdown can hold it. Custom types write their own Markdown: see [Node and mark types](TYPES.md#markdown-export).
@@ -148,8 +150,13 @@ Blank lines separate paragraphs, and other line breaks become hard breaks. Space
 Two schemas are included:
 
 ```ruby
-Prosemirror::Schema.tiptap       # Tiptap's StarterKit, tables, images, underline, subscript, superscript, highlight (default)
-Prosemirror::Schema.prosemirror  # prosemirror-schema-basic and prosemirror-schema-list
+# The default: Tiptap's StarterKit, with tables, images, task lists,
+# details, YouTube and Twitch embeds, mentions, underline, subscript,
+# superscript and highlight
+Prosemirror::Schema.tiptap
+
+# prosemirror-schema-basic and prosemirror-schema-list
+Prosemirror::Schema.prosemirror
 ```
 
 Type names are written in snake_case (`bullet_list`). Use `case: :camel` to write camelCase (`bulletList`), as Tiptap does. Both cases are always accepted on input.
@@ -158,6 +165,26 @@ Type names are written in snake_case (`bullet_list`). Use `case: :camel` to writ
 Prosemirror.schema = Prosemirror::Schema.tiptap(case: :camel)
 ```
 
+`text_align: true` adds Tiptap's TextAlign extension, configured for headings and paragraphs: a `textAlign` attribute, `left`, `center`, `right` or `justify`, rendered as a `text-align` style. HTML import also reads the old `align` attribute. Markdown has no syntax for it: Markdown export leaves it out. Without the option, `textAlign` is kept in `to_h`, but not rendered.
+
+```ruby
+Prosemirror::Schema.tiptap(text_align: true)
+```
+
+YouTube and Twitch embeds store the video's URL in `src`, and render an iframe of its embed URL, built from the video's id: other URLs render nothing. HTML import reads Tiptap's markup, and also iframes of embed URLs without it. Twitch only plays embeds on the domain they name, so set it in a subclass, as Tiptap's `parent` option. YouTube's `nocookie` option is a subclass too:
+
+```ruby
+class Twitch < Prosemirror::Nodes::Twitch
+  def parent = "example.com"
+end
+
+class Youtube < Prosemirror::Nodes::Youtube
+  def embed_host = "https://www.youtube-nocookie.com"
+end
+
+Prosemirror.schema = Prosemirror::Schema.tiptap.with(Twitch, Youtube)
+```
+
 ## Custom nodes and marks
 
 A node type is a Phlex component, and its attributes are Literal properties. The type name comes from the class name (`ImageBlock` → `image_block`).

data/ROADMAP.md

@@ -199,9 +199,11 @@ They differ in more than names:
 - Custom node types write themselves in `to_markdown`, and mark types declare their syntax with `markdown`.
 - Importing the Markdown gives the document back, as far as Markdown can hold it, tested on real-world Markdown and HTML.
 
-### 0.6: More Tiptap node types
+### 0.6: More Tiptap node types (released)
 
-- Task lists, text alignment, mentions, details, embeds.
+- Mentions, task lists, details, and YouTube and Twitch embeds, in `Schema.tiptap`, with HTML that gives the same JSON as Tiptap's `generateJSON`.
+- Text alignment, as an option: `Schema.tiptap(text_align: true)`.
+- GitHub Flavored Markdown task lists in Markdown import and export. Details are written as GitHub's `<details>` HTML.
 
 ### 1.0
 

data/TYPES.md

@@ -259,3 +259,15 @@ Prosemirror.schema = Prosemirror::Schema.tiptap.with(Paragraph)
 ```
 
 A subclass that declares parse rules replaces the rules of its parent. See the [cookbook](COOKBOOK.md) for more examples.
+
+With `Schema.tiptap(text_align: true)`, paragraphs and headings are `Prosemirror::TextAlign::Paragraph` and `Prosemirror::TextAlign::Heading`: subclass these to keep the alignment. Other types get it by including `Prosemirror::TextAlign`, which declares the `text_align` attribute, and rendering `text_align_style`:
+
+```ruby
+class Callout < Prosemirror::NodeType
+  include Prosemirror::TextAlign
+  group :block
+  content "inline*"
+
+  def view_template(&) = aside(style: text_align_style, &)
+end
+```

data/lib/prosemirror/markdown/builder.rb

@@ -6,7 +6,8 @@ module Prosemirror
     # (https://github.com/gjtorikian/commonmarker), so that the schema's parse rules apply to Markdown too.
     # Each Markdown node becomes the element commonmarker renders for it, without going through HTML.
     #
-    # - GitHub Flavored Markdown: tables, strikethrough and autolinks. Task list items stay as text (`[ ] `).
+    # - GitHub Flavored Markdown: tables, strikethrough, autolinks and task lists. A bullet list whose items
+    #   all have a checkbox is a task list. In other lists, the checkboxes stay as text (`[ ] `).
     # - Raw HTML can span several Markdown blocks, like `<del>` around a paragraph: with the herb gem, a
     #   document holding raw HTML is rendered to HTML by commonmarker and imported. Without it, raw HTML
     #   stays as text.
@@ -15,16 +16,21 @@ module Prosemirror
     class Builder
       MAX_DEPTH = HTML::Builder::MAX_DEPTH
       EXTENSIONS = {
-        strikethrough: true, table: true, autolink: true, tasklist: false, shortcodes: false, header_ids: nil,
+        strikethrough: true, table: true, autolink: true, tasklist: true, shortcodes: false, header_ids: nil,
         front_matter_delimiter: "---"
       }.freeze
-      RENDER_OPTIONS = {extension: EXTENSIONS, render: {unsafe: true, hardbreaks: false, github_pre_lang: false}}.freeze
+      # `tasklist_classes` gives task lists the classes of GitHub's HTML, which the task list type reads.
+      RENDER_OPTIONS = {
+        extension: EXTENSIONS, render: {unsafe: true, hardbreaks: false, github_pre_lang: false, tasklist_classes: true}
+      }.freeze
       TAGS = {
         paragraph: "p", block_quote: "blockquote", item: "li", thematic_break: "hr", table_row: "tr",
         emph: "em", strong: "strong", strikethrough: "s", linebreak: "br"
       }.freeze
       # A table's delimiter row, like `| :-- | --: |`, at the end of its line.
       DELIMITER_ROW = /\|?(?:\s*:?-+:?\s*\|)*\s*:?-+:?\s*\|?\s*\z/
+      # A task item's marker and checkbox, at its first line.
+      TASK_MARKER = /\A(?:[-+*]|\d+[.)])[ \t]+(\[[ xX]\])/
       # The bytes commonmarker escapes in URLs, as comrak's `escape_href`: all but these, and `%` when it
       # doesn't start an escape. `&` and `'` are kept: comrak writes them as HTML references.
       URL_UNSAFE = %r{%(?!\h\h)|[^-_.+!*(),#@?=;:/$~A-Za-z0-9&'%]}n
@@ -87,6 +93,8 @@ module Prosemirror
       # Adds a node to the target. Returns the element to add its children to, when they need adding.
       def add(node, target)
         type = node.type # commonmarker allocates for each call
+        return checkbox_text(node, type, target) if @checkbox
+
         if (tag = TAGS[type])
           return HTML::Element.new(tag)
         end
@@ -94,6 +102,7 @@ module Prosemirror
         case type
         when :heading then HTML::Element.new("h#{node.header_level}")
         when :list then list(node)
+        when :taskitem then task_item(node, target)
         when :code_block then code_block(node, target)
         when :table then table(node)
         when :table_cell then table_cell(node)
@@ -110,11 +119,44 @@ module Prosemirror
       end
 
       def list(node)
-        return HTML::Element.new("ul") unless node.list_type == :ordered
+        if node.list_type != :ordered
+          return HTML::Element.new("ul", (node.all? { |item| item.type == :taskitem }) ? {"data-type" => "taskList"} : {})
+        end
 
         HTML::Element.new("ol", (node.list_start == 1) ? {} : {"start" => node.list_start.to_s})
       end
 
+      # commonmarker doesn't say whether a task item is checked: its checkbox is read from its first line.
+      # Outside a task list, the checkbox is written as text, at the start of the item's first paragraph.
+      def task_item(node, target)
+        position = node.source_position
+        checkbox = @lines[position[:start_line] - 1].to_s.byteslice((position[:start_column] - 1)..).to_s[TASK_MARKER, 1] || "[ ]"
+        if target["data-type"] == "taskList"
+          return HTML::Element.new("li", {"data-type" => "taskItem", "data-checked" => checkbox.match?(/x/i).to_s})
+        end
+
+        item = HTML::Element.new("li")
+        if node.first_child
+          @checkbox = checkbox
+        else
+          text(item.append(HTML::Element.new("p")), "#{checkbox} ")
+        end
+        item
+      end
+
+      # The first child of a task item outside a task list: its paragraph starts with the checkbox, or a
+      # paragraph holding it goes before.
+      def checkbox_text(node, type, target)
+        checkbox = "#{@checkbox} "
+        @checkbox = nil
+        paragraph = HTML::Element.new("p")
+        text(paragraph, checkbox)
+        return paragraph if type == :paragraph
+
+        target.append(paragraph)
+        add(node, target)
+      end
+
       def code_block(node, target)
         language = node.fence_info.to_s.split.first
         code = HTML::Element.new("code", language ? {"class" => "language-#{language}"} : {})

data/lib/prosemirror/markdown_serializer.rb

@@ -213,10 +213,12 @@ module Prosemirror
     end
 
     # Whether the list follows a list of the same type, which it would continue in Markdown with the same
-    # marker. Alternating lists in a row switch markers.
-    def list_after_list?(parent, index)
+    # marker. Alternating lists in a row switch markers. The block, called with the siblings before, tells
+    # which lists share markers, when other types than the list's do.
+    def list_after_list?(parent, index, &same)
+      same ||= ->(sibling) { sibling.type == parent.content[index].type }
       run = 0
-      run += 1 while index - run - 1 >= 0 && parent.content[index - run - 1].type == parent.content[index].type
+      run += 1 while index - run - 1 >= 0 && same.call(parent.content[index - run - 1])
       run.odd?
     end
 

data/lib/prosemirror/nodes/bullet_list.rb

@@ -9,11 +9,20 @@ module Prosemirror
 
       def view_template(&) = ul(&)
 
-      # `-` items, or `*` right after another bullet list, which would otherwise continue it.
+      # `-` items, or `*` right after another bullet or task list, which would otherwise continue it.
       def to_markdown(markdown, parent, index)
-        marker = markdown.list_after_list?(parent, index) ? "* " : "- "
+        marker = self.class.marker(markdown, parent, index)
         markdown.render_list(node, "  ") { marker }
       end
+
+      # Bullet and task lists share markers.
+      def self.marker(markdown, parent, index)
+        after_list = markdown.list_after_list?(parent, index) do |sibling|
+          type = markdown.schema.node_type(sibling.type)
+          !type.nil? && (type <= BulletList || type <= TaskList)
+        end
+        after_list ? "* " : "- "
+      end
     end
   end
 end

data/lib/prosemirror/nodes/details.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Prosemirror
+  module Nodes
+    # Tiptap's details: a summary, and content shown when it's open. `open` is the attribute Tiptap keeps with
+    # `persist: true`.
+    class Details < NodeType
+      group :block
+      content "details_summary details_content"
+
+      prop :open, _Boolean, default: false, parse_html: ->(element) { element.key?("open") }
+      parse_html tag: "details"
+
+      def view_template(&) = details(open: @open, &)
+
+      # As HTML, which GitHub and Markdown import read, with the content in Markdown between blank lines.
+      def to_markdown(markdown, _parent, _index)
+        summary, content = node.content
+        markdown.text("<details#{" open" if @open}>\n#{markdown.node_html(summary)}", escape: false)
+        markdown.close_block(node)
+        markdown.render(content, node, 1)
+        markdown.text("</details>", escape: false)
+        markdown.close_block(node)
+      end
+    end
+  end
+end

data/lib/prosemirror/nodes/details_content.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Prosemirror
+  module Nodes
+    class DetailsContent < NodeType
+      content "block+"
+      parse_html tag: %(div[data-type="detailsContent"])
+
+      def view_template(&) = div(data_type: "detailsContent", &)
+    end
+  end
+end

data/lib/prosemirror/nodes/details_summary.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Prosemirror
+  module Nodes
+    class DetailsSummary < NodeType
+      content "text*"
+      parse_html tag: "summary"
+
+      def view_template(&) = summary(&)
+    end
+  end
+end

data/lib/prosemirror/nodes/mention.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Prosemirror
+  module Nodes
+    # Tiptap's mention: `@label`, or `@id` without a label. `mentionSuggestionChar` is the character typed
+    # to insert it, `@` by default, which tells mentions of different kinds apart.
+    class Mention < NodeType
+      group :inline
+      inline
+
+      prop :id, _Union?(String, Integer), parse_html: ->(element) { element["data-id"] }
+      prop :label, _String?, parse_html: ->(element) { element["data-label"] }
+      prop :mention_suggestion_char, _String(length: 1..), default: "@", json: "mentionSuggestionChar",
+        parse_html: ->(element) { element["data-mention-suggestion-char"] }
+      leaf_text { |node| display_text(node.attrs) }
+      parse_html tag: %(span[data-type="mention"])
+
+      def view_template
+        span(data: {type: "mention", id: @id, label: @label, mention_suggestion_char: @mention_suggestion_char}) do
+          self.class.display_text(node.attrs)
+        end
+      end
+
+      # Its text, or with `html: true`, its HTML, which Markdown import reads back.
+      def to_markdown(markdown, _parent, _index)
+        if markdown.html?
+          markdown.write(markdown.node_html(node))
+        else
+          markdown.text(self.class.display_text(node.attrs))
+        end
+      end
+
+      def self.display_text(attrs) = "#{attrs[:mention_suggestion_char] || "@"}#{attrs[:label] || attrs[:id]}"
+    end
+  end
+end

data/lib/prosemirror/nodes/task_item.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Prosemirror
+  module Nodes
+    # Tiptap's task item, with its content in a `div` after the checkbox. Its content is Tiptap's with
+    # `nested: true`, which also accepts documents written without it.
+    class TaskItem < NodeType
+      content "paragraph block*"
+
+      # From Tiptap's `data-checked`, or the checkbox.
+      prop :checked, _Boolean, default: false, parse_html: lambda { |element|
+        if element.key?("data-checked")
+          ["", "true"].include?(element["data-checked"])
+        else
+          element.query(%(input[type="checkbox"]))&.key?("checked") || false
+        end
+      }
+
+      parse_html tag: %(li[data-type="taskItem"]), priority: 51, content_element: "div"
+      parse_html tag: "li.task-list-item", priority: 51, context: "task_list/"
+
+      def view_template(&)
+        li(data_checked: @checked.to_s, data_type: "taskItem") do
+          label do
+            input(type: "checkbox", checked: @checked)
+            span
+          end
+          div(&)
+        end
+      end
+
+      # `[x] ` before its content, without the space when its first paragraph is empty.
+      def to_markdown(markdown, _parent, _index)
+        markdown.write(@checked ? "[x]" : "[ ]")
+        markdown.write(" ") unless node.content.first&.content.to_a.empty?
+        markdown.render_content(node)
+      end
+    end
+  end
+end

data/lib/prosemirror/nodes/task_list.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Prosemirror
+  module Nodes
+    # Tiptap's task list. Also imported from GitHub's HTML, as commonmarker renders it, when every item has a
+    # checkbox.
+    class TaskList < NodeType
+      group :block, :list
+      content "task_item+"
+      parse_html tag: %(ul[data-type="taskList"]), priority: 51
+      parse_html(tag: "ul.contains-task-list", priority: 51) do |element|
+        element.element_children.all? { |item| item.matches?("li.task-list-item") } && {}
+      end
+
+      def view_template(&) = ul(data_type: "taskList", &)
+
+      # `- [x]` items. Its markers alternate with bullet lists', or Markdown would join them.
+      def to_markdown(markdown, parent, index)
+        marker = BulletList.marker(markdown, parent, index)
+        markdown.render_list(node, "  ") { marker }
+      end
+    end
+  end
+end

data/lib/prosemirror/nodes/twitch.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+require "uri"
+
+module Prosemirror
+  module Nodes
+    # Tiptap's Twitch embed. `src` is the URL of a video, clip or channel, rendered as an iframe of its embed
+    # URL. Without a Twitch URL, it renders nothing. Twitch only plays embeds on the domain named by `parent`:
+    # override `parent` in a subclass, as Tiptap's `parent` option, which defaults to `localhost`.
+    class Twitch < NodeType
+      # The URLs Tiptap accepts.
+      URL = %r{\A(?:https?://)?(?:www\.)?(?:twitch\.tv|clips\.twitch\.tv)/(?:videos/\d+|\w+/clip/[\w-]+|[\w-]+/?)?(?:\?.*)?\z}
+
+      group :block
+
+      prop :src, _String(length: 1..), parse_html: ->(element) { Twitch.from_embed_url(element["src"])&.fetch(:src) || element["src"] }
+      prop :width, _Integer?(1..), default: 640, &Coerce::INTEGER
+      prop :height, _Integer?(1..), default: 480, &Coerce::INTEGER
+      prop :autoplay, _Boolean, default: false, parse_html: ->(element) { Twitch.from_embed_url(element["src"])&.fetch(:autoplay) }
+      prop :muted, _Boolean, default: false, parse_html: ->(element) { Twitch.from_embed_url(element["src"])&.fetch(:muted) }
+      prop :time, _String?, parse_html: ->(element) { Twitch.from_embed_url(element["src"])&.fetch(:time) }
+
+      # Tiptap's markup, `<div data-twitch-video><iframe>`, or an iframe of a Twitch embed URL.
+      parse_html(tag: "iframe[src]") do |element|
+        (element.parent&.key?("data-twitch-video") || Twitch.from_embed_url(element["src"])) ? {} : false
+      end
+
+      def view_template
+        src = safe_url(self.class.embed_url(@src, parent:, autoplay: @autoplay, muted: @muted, time: @time))
+        return unless src
+
+        div(data_twitch_video: "") { iframe(src:, width: @width, height: @height, allowfullscreen: true) }
+      end
+
+      # The domain of the site the embed is on.
+      def parent = "localhost"
+
+      # The URL, as text that Markdown links. With `html: true`, the iframe.
+      def to_markdown(markdown, _parent, _index)
+        markdown.write(markdown.html? ? markdown.node_html(node) : "<#{markdown.url(@src)}>")
+        markdown.close_block(node)
+      end
+
+      # The video, clip or channel of a Twitch URL, as `[kind, id]`, or nil.
+      def self.identify(src)
+        return unless src.match?(URL)
+
+        path = src.split("?").first
+        if (clip = path[%r{clips\.twitch\.tv/([\w-]+)}, 1] || path[%r{twitch\.tv/[\w-]+/clip/([\w-]+)}, 1])
+          [:clip, clip]
+        elsif (video = path[%r{twitch\.tv/videos/(\d+)}, 1])
+          [:video, video]
+        elsif (channel = path[%r{twitch\.tv/([\w-]+)/?\z}, 1])
+          [:channel, channel]
+        end
+      end
+
+      # The embed URL, as Tiptap builds it, or nil.
+      def self.embed_url(src, parent:, autoplay: false, muted: false, time: nil)
+        kind, id = identify(src)
+        return unless kind
+
+        options = {"autoplay" => ("true" if autoplay), "muted" => ("true" if muted)}
+        query = if kind == :clip
+          {"clip" => id, "parent" => parent, **options}
+        else
+          {kind.to_s => id, "parent" => parent, "allowfullscreen" => "true", **options, "time" => (time if kind == :video)}
+        end
+        base = (kind == :clip) ? "https://clips.twitch.tv/embed" : "https://player.twitch.tv/"
+        "#{base}?#{URI.encode_www_form(query.compact)}"
+      end
+
+      # The URL and options of an embed URL, as Tiptap reads them, or nil.
+      def self.from_embed_url(url)
+        uri = URI.parse(url.to_s)
+        return unless uri.is_a?(URI::HTTP)
+
+        query = URI.decode_www_form(uri.query.to_s).to_h
+        src = case [uri.host.to_s.delete_prefix("www."), uri.path]
+        in ["player.twitch.tv", _]
+          if query["video"] then "https://www.twitch.tv/videos/#{query["video"]}"
+          elsif query["channel"] then "https://www.twitch.tv/#{query["channel"]}"
+          end
+        in ["clips.twitch.tv", "/embed"]
+          query["clip"]&.then { |clip| "https://clips.twitch.tv/#{clip}" }
+        else nil
+        end
+        {src:, autoplay: query["autoplay"] == "true", muted: query["muted"] == "true", time: query["time"]} if src&.match?(URL)
+      rescue URI::Error, ArgumentError
+        nil
+      end
+    end
+  end
+end

data/lib/prosemirror/nodes/youtube.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+require "uri"
+
+module Prosemirror
+  module Nodes
+    # Tiptap's YouTube embed. `src` is the video's URL, like `https://www.youtube.com/watch?v=…`, rendered as
+    # an iframe of its embed URL. Without a YouTube URL, it renders nothing. Override `embed_host` for
+    # `https://www.youtube-nocookie.com`, as Tiptap's `nocookie` option.
+    class Youtube < NodeType
+      # The URLs Tiptap accepts: on youtube.com, youtu.be and youtube-nocookie.com.
+      URL = %r{\A(?:(?:https?:)?//)?(?:(?:www|m|music)\.)?(?:youtube\.com|youtu\.be|youtube-nocookie\.com)(?:/(?:[\w-]+\?v=|embed/|v/)?)[\w-]+\S*\z}
+      EMBED_HOSTS = %w[youtube.com youtube-nocookie.com].freeze
+
+      group :block
+
+      prop :src, _String(length: 1..), parse_html: ->(element) { Youtube.from_embed_url(element["src"])&.fetch(:src) || element["src"] }
+      prop :start, _Integer(0..), default: 0,
+        parse_html: ->(element) { Youtube.from_embed_url(element["src"])&.fetch(:start) }, &Coerce::INTEGER
+      prop :width, _Integer?(1..), default: 640, &Coerce::INTEGER
+      prop :height, _Integer?(1..), default: 480, &Coerce::INTEGER
+
+      # Tiptap's markup, `<div data-youtube-video><iframe>`, or an iframe of a YouTube embed URL.
+      parse_html(tag: "iframe[src]") do |element|
+        (element.parent&.key?("data-youtube-video") || Youtube.from_embed_url(element["src"])) ? {} : false
+      end
+
+      def view_template
+        src = safe_url(self.class.embed_url(@src, start: @start, host: embed_host))
+        return unless src
+
+        div(data_youtube_video: "") { iframe(src:, width: @width, height: @height, allowfullscreen: true) }
+      end
+
+      def embed_host = "https://www.youtube.com"
+
+      # The URL, as text that Markdown links. With `html: true`, the iframe.
+      def to_markdown(markdown, _parent, _index)
+        markdown.write(markdown.html? ? markdown.node_html(node) : "<#{markdown.url(@src)}>")
+        markdown.close_block(node)
+      end
+
+      # The embed URL of a video or playlist, as Tiptap builds it, or nil.
+      def self.embed_url(src, start: 0, host: "https://www.youtube.com")
+        return unless src.match?(URL)
+
+        if (playlist = src[/[?&]list=([\w-]+)/, 1])
+          return "#{host}/embed/videoseries?list=#{playlist}"
+        end
+
+        id = src[%r{(?:youtu\.be/|/embed/|/v/|/shorts/|/live/|[?&]v=)([\w-]+)}, 1]
+        id && "#{host}/embed/#{id}#{"?start=#{start}" if start.positive?}"
+      end
+
+      # The video URL and start time of an embed URL, as Tiptap reads them, or nil.
+      def self.from_embed_url(url)
+        uri = URI.parse(url.to_s)
+        return unless uri.is_a?(URI::HTTP) && EMBED_HOSTS.include?(uri.host.to_s.delete_prefix("www."))
+
+        query = URI.decode_www_form(uri.query.to_s).to_h
+        src = case uri.path
+        when "/embed/videoseries" then query["list"]&.then { |list| "https://www.youtube.com/playlist?list=#{list}" }
+        when %r{\A/embed/([\w-]+)\z} then "https://www.youtube.com/watch?v=#{Regexp.last_match(1)}"
+        end
+        {src:, start: query["start"].to_i} if src&.match?(URL)
+      rescue URI::Error, ArgumentError
+        nil
+      end
+    end
+  end
+end

data/lib/prosemirror/schema.rb

@@ -24,13 +24,17 @@ module Prosemirror
     # Called with an `InvalidDocument` error for each problem fixed.
     prop :on_invalid, _Callable?, reader: false
 
-    # Tiptap's StarterKit and common extensions.
-    def self.tiptap(**)
+    # Tiptap's StarterKit and common extensions. `text_align: true` adds the TextAlign extension, configured
+    # for headings and paragraphs.
+    def self.tiptap(text_align: false, **)
       new(
         nodes: [
-          Nodes::Doc, Nodes::Paragraph, Nodes::Text, Nodes::Heading, Nodes::Blockquote, Nodes::BulletList,
+          Nodes::Doc, text_align ? TextAlign::Paragraph : Nodes::Paragraph, Nodes::Text,
+          text_align ? TextAlign::Heading : Nodes::Heading, Nodes::Blockquote, Nodes::BulletList,
           Nodes::OrderedList, Nodes::ListItem, Nodes::CodeBlock, Nodes::HardBreak, Nodes::HorizontalRule,
-          Nodes::Image, Nodes::Table, Nodes::TableRow, Nodes::TableHeader, Nodes::TableCell
+          Nodes::Image, Nodes::Table, Nodes::TableRow, Nodes::TableHeader, Nodes::TableCell, Nodes::TaskList,
+          Nodes::TaskItem, Nodes::Details, Nodes::DetailsSummary, Nodes::DetailsContent, Nodes::Youtube,
+          Nodes::Twitch, Nodes::Mention
         ],
         # In Tiptap's order, which sorts and nests marks.
         marks: [

data/lib/prosemirror/text_align.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Prosemirror
+  # Tiptap's TextAlign extension: a `textAlign` attribute, rendered as a `text-align` style. Included in the
+  # paragraphs and headings of `Schema.tiptap(text_align: true)`. A custom type includes it, and renders
+  # `style: text_align_style`.
+  module TextAlign
+    ALIGNMENTS = %w[left center right justify].freeze
+
+    def self.included(type)
+      # From the `text-align` style, or the old `align` attribute, which Tiptap doesn't read.
+      type.prop :text_align, type._Union?(*ALIGNMENTS), json: "textAlign", parse_html: lambda { |element|
+        (element.style["text-align"] || element["align"]).to_s.strip.downcase.then { |value| value if ALIGNMENTS.include?(value) }
+      }
+    end
+
+    def text_align_style = @text_align && "text-align: #{@text_align}"
+
+    class Paragraph < Nodes::Paragraph
+      include TextAlign
+
+      def view_template(&) = p(style: text_align_style, &)
+    end
+
+    class Heading < Nodes::Heading
+      include TextAlign
+
+      def view_template(&) = tag(:"h#{@level}", style: text_align_style, &)
+    end
+  end
+end

data/lib/prosemirror/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Prosemirror
-  VERSION = "0.5.0"
+  VERSION = "0.6.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: prosemirror
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Hans Lemuet
@@ -107,22 +107,31 @@ files:
 - lib/prosemirror/nodes/blockquote.rb
 - lib/prosemirror/nodes/bullet_list.rb
 - lib/prosemirror/nodes/code_block.rb
+- lib/prosemirror/nodes/details.rb
+- lib/prosemirror/nodes/details_content.rb
+- lib/prosemirror/nodes/details_summary.rb
 - lib/prosemirror/nodes/doc.rb
 - lib/prosemirror/nodes/hard_break.rb
 - lib/prosemirror/nodes/heading.rb
 - lib/prosemirror/nodes/horizontal_rule.rb
 - lib/prosemirror/nodes/image.rb
 - lib/prosemirror/nodes/list_item.rb
+- lib/prosemirror/nodes/mention.rb
 - lib/prosemirror/nodes/ordered_list.rb
 - lib/prosemirror/nodes/paragraph.rb
 - lib/prosemirror/nodes/table.rb
 - lib/prosemirror/nodes/table_cell.rb
 - lib/prosemirror/nodes/table_header.rb
 - lib/prosemirror/nodes/table_row.rb
+- lib/prosemirror/nodes/task_item.rb
+- lib/prosemirror/nodes/task_list.rb
 - lib/prosemirror/nodes/text.rb
+- lib/prosemirror/nodes/twitch.rb
+- lib/prosemirror/nodes/youtube.rb
 - lib/prosemirror/parse_rule.rb
 - lib/prosemirror/rendering.rb
 - lib/prosemirror/schema.rb
+- lib/prosemirror/text_align.rb
 - lib/prosemirror/text_serializer.rb
 - lib/prosemirror/transformer.rb
 - lib/prosemirror/type_definition.rb