chore(release): tiptap v2.5

.github/workflows/build.yml

@@ -42,6 +42,7 @@ jobs:
         with:
           path: |
             **/node_modules
+            **/.turbo
             /home/runner/.cache/Cypress
           key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
 
@@ -102,10 +103,10 @@ jobs:
 
       - name: Test ${{ matrix.test-spec.name }}
         id: cypress
-        uses: cypress-io/github-action@v6.6.0
+        uses: cypress-io/github-action@v6.7.1
         with:
           cache-key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
-          start: npm run start
+          start: npm run serve
           wait-on: 'http://localhost:3000'
           spec: ${{ matrix.test-spec.spec }}
           project: ./tests

.github/workflows/publish.yml

@@ -4,9 +4,14 @@ on:
   push:
     branches:
       - main
+      - develop
   # manual trigger for other branches
   workflow_dispatch:
 
+permissions:
+  id-token: write
+  contents: write
+  pull-requests: write
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -16,41 +21,48 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20]
+
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Setup Node 20
-        uses: actions/setup-node@v3
+      - name: Setup Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
+          node-version:  ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org/'
+
+      - name: Load cached dependencies
+        uses: actions/cache@v4.0.2
+        id: cache
+        with:
+          path: |
+            **/node_modules
+            **/.turbo
+            /home/runner/.cache/Cypress
+          key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
 
       - name: Install Dependencies
         run: npm ci
 
       - name: Create Release PR or publish stable version to npm
-        if: github.ref_name == 'main'
         id: changesets
         uses: changesets/action@v1
         with:
           publish: npm run publish
+          title: ${{ github.ref_name == 'main' && 'Publish a new stable version'  || 'Publish a new pre-release version' }}
+          commit: >-
+            ${{ github.ref_name == 'main' && 'chore(release): publish a new release version'  || 'chore(release): publish a new pre-release version' }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
-
-      - name: Create Release PR or publish pre version to npm
-        if: github.ref_name != 'main'
-        id: changesets_pre
-        uses: changesets/action@v1
-        with:
-          publish: npm run publish:pre
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
 
       - name: Send release notification
-        if: steps.changesets.outputs.published == 'true' || steps.changesets_pre.outputs.published == 'true'
+        if: steps.changesets.outputs.published == 'true'
         id: slack
         uses: slackapi/slack-github-action@v1.26.0
         with:

.gitignore

@@ -17,6 +17,9 @@ yarn-error.log*
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 
+# Turbo cache
+.turbo
+
 .rpt2_cache
 .rts2_cache
 .rts2_cache_cjs

demos/preview/index.vue

@@ -1,32 +1,90 @@
-<script>
+<script setup>
+import { ref } from 'vue'
+
 // @ts-nocheck
+const showDemoList = process.env.NODE_ENV === 'development'
+
+const searchValue = ref('')
+
 </script>
 
 <template>
-  <ul v-if="$route.path === '/'">
-    <li
-      class="p-5 border-b-2 border-black"
-      v-for="route in $router.options.routes"
-      :key="route.path"
+  <template v-if="$route.path === '/'">
+    <input
+      class="w-full p-3 my-3 focus:outline-none border-b"
+      type="search"
+      placeholder="Search for a demo..."
+      autofocus
+      v-model="searchValue"
     >
-      <router-link
-        class="block mb-2 font-medium"
-        :to="route.path"
+    <ul v-if="showDemoList || listing">
+      <li
+        class="p-5 border-b-2 border-black"
+        v-for="route in $router.options.routes.filter(route => searchValue === ''? true : route.props.name.toLowerCase().includes(searchValue.toLowerCase()))"
+        :key="route.path"
       >
-        {{ route.props.name }}
-      </router-link>
-
-      <div class="flex">
-        <a
-          class="mr-4 text-sm text-gray-300 font-medium"
-          v-for="(tab, index) in route.props.tabs"
-          :key="index"
-          :href="`/src/${route.props.name}/${tab.name}/`"
+        <router-link
+          class="block mb-2 font-medium"
+          :to="route.path"
         >
-          {{ tab.name }}
-        </a>
-      </div>
-    </li>
-  </ul>
+          {{ route.props.name }}
+        </router-link>
+
+        <div class="flex">
+          <a
+            class="mr-4 text-sm text-gray-300 font-medium"
+            v-for="(tab, index) in route.props.tabs"
+            :key="index"
+            :href="`/src/${route.props.name}/${tab.name}/`"
+          >
+            {{ tab.name }}
+          </a>
+        </div>
+      </li>
+    </ul>
+    <div v-else>Nothing to see here :-)</div>
+  </template>
   <router-view v-else />
 </template>
+
+<script>
+export default {
+  methods: {
+    fromString(value) {
+      if (value === null) {
+        return true
+      }
+
+      if (value.match(/^\d*(\.\d+)?$/)) {
+        return Number(value)
+      }
+
+      if (value === 'true') {
+        return true
+      }
+
+      if (value === 'false') {
+        return false
+      }
+
+      if (value === 'null') {
+        return null
+      }
+
+      return value
+    },
+  },
+
+  computed: {
+    query() {
+      return Object.fromEntries(Object
+        .entries(this.$route.query)
+        .map(([key, value]) => [key, this.fromString(value)]))
+    },
+
+    listing() {
+      return this.query.listing || false
+    },
+  },
+}
+</script>

demos/src/Commands/InsertContent/React/index.spec.js

@@ -41,4 +41,54 @@ context('/src/Commands/InsertContent/React/', () => {
       cy.get('.tiptap').should('contain.html', '<pre><code>foo\nbar</code></pre>')
     })
   })
+
+  it('should keep newlines and tabs', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('<p>Hello\n\tworld\n\t\thow\n\t\t\tnice.\ntest\tOK</p>')
+      cy.get('.tiptap').should('contain.html', '<p>Hello\n\tworld\n\t\thow\n\t\t\tnice.\ntest\tOK</p>')
+    })
+  })
+
+  it('should keep newlines and tabs', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('<h1>Tiptap</h1>\n<p><strong>Hello World</strong></p>')
+      cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p>')
+    })
+  })
+
+  it('should allow inserting nothing', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('')
+      cy.get('.tiptap').should('contain.html', '')
+    })
+  })
+
+  it('should allow inserting a partial HTML tag', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('<p>foo')
+      cy.get('.tiptap').should('contain.html', '<p>foo</p>')
+    })
+  })
+
+  it('should allow inserting an incomplete HTML tag', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('foo<p')
+      cy.get('.tiptap').should('contain.html', '<p>foo&lt;p</p>')
+    })
+  })
+
+  it('should allow inserting a list', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('<ul><li>ABC</li><li>123</li></ul>')
+      cy.get('.tiptap').should('contain.html', '<ul><li><p>ABC</p></li><li><p>123</p></li></ul>')
+    })
+  })
+
+  it('should remove newlines and tabs when parseOptions.preserveWhitespace=false', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('\n<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>\n', { parseOptions: { preserveWhitespace: false } })
+      cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p>')
+    })
+  })
+
 })

demos/src/Commands/SetContent/React/index.jsx

@@ -0,0 +1,31 @@
+import './styles.scss'
+
+import { Color } from '@tiptap/extension-color'
+import ListItem from '@tiptap/extension-list-item'
+import Mentions from '@tiptap/extension-mention'
+import TextStyle from '@tiptap/extension-text-style'
+import { EditorProvider } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+const extensions = [
+  Color.configure({ types: [TextStyle.name, ListItem.name] }),
+  TextStyle.configure({ types: [ListItem.name] }),
+  StarterKit.configure({
+    bulletList: {
+      keepMarks: true,
+    },
+    orderedList: {
+      keepMarks: true,
+    },
+  }),
+  Mentions,
+]
+
+const content = ''
+
+export default () => {
+  return (
+    <EditorProvider extensions={extensions} content={content}></EditorProvider>
+  )
+}