Skip to content

Commit

Permalink
Merge branch 'develop' into link-href-fix
Browse files Browse the repository at this point in the history
  • Loading branch information
nperez0111 authored Aug 11, 2024
2 parents 7e1154c + 84febb2 commit c00fa5c
Show file tree
Hide file tree
Showing 231 changed files with 3,604 additions and 4,057 deletions.
5 changes: 5 additions & 0 deletions .changeset/dry-cycles-sleep.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiptap/react": patch
---

Updates the typings to `useEditor` and `EditorProvider` to not conflict with the core Editor type
5 changes: 5 additions & 0 deletions .changeset/gorgeous-rice-yell.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiptap/core": minor
---

Add `getContent` to nodePasteRules to allow specifying inner content to a created node
5 changes: 5 additions & 0 deletions .changeset/loud-rockets-film.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiptap/extension-text-style": patch
---

Give text-style extension a higher priority to have colors apply to things like underlines and strikethroughs
5 changes: 5 additions & 0 deletions .changeset/ordered-list-type-attr.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiptap/extension-ordered-list": minor
---

Support the `type` attribute for ordered lists
5 changes: 5 additions & 0 deletions .changeset/perfect-dryers-glow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiptap/react": patch
---

This resolves a bug with `useEditor` where event handlers were being called 2x for what should have been a single registration
12 changes: 12 additions & 0 deletions .changeset/rotten-beers-protect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
"@tiptap/react": minor
"@tiptap/core": minor
---

This PR significantly improves the performance of React NodeViews in a couple of ways:

- It now uses useSyncExternalStore to synchronize changes between React & the editor instance
- It dramatically reduces the number of re-renders by re-using instances of React portals that have already been initialized and unaffected by the change made in the editor

We were seeing performance problems with React NodeViews because a change to one of them would cause a re-render to all instances of node views. For an application that heavily relies on node views in React, this was quite expensive.
This should dramatically cut down on the number of instances that have to re-render, and, making each of those re-renders much less costly.
5 changes: 5 additions & 0 deletions .changeset/three-snakes-wink.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiptap/vue-3": patch
---

fix vue3 class components not working as node views
9 changes: 9 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,15 @@ module.exports = {
node: true,
},
overrides: [
{
files: [
'./**/*.ts',
'./**/*.tsx',
'./**/*.js',
'./**/*.jsx',
],
extends: ['plugin:react-hooks/recommended'],
},
{
files: [
'./**/*.ts',
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ jobs:

- name: Test ${{ matrix.test-spec.name }}
id: cypress
uses: cypress-io/[email protected].1
uses: cypress-io/[email protected].2
with:
cache-key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
start: npm run serve
Expand All @@ -114,15 +114,15 @@ jobs:
quiet: true

- name: Export screenshots (on failure only)
uses: actions/[email protected].3
uses: actions/[email protected].5
if: failure()
with:
name: cypress-screenshots
path: tests/cypress/screenshots
retention-days: 7

- name: Export screen recordings (on failure only)
uses: actions/[email protected].3
uses: actions/[email protected].5
if: failure()
with:
name: cypress-videos
Expand Down
2 changes: 1 addition & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2023, Tiptap GmbH
Copyright (c) 2024, Tiptap GmbH

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ For help, discussion about best practices, or any other conversation that would

</table>

[iFixit](https://www.ifixit.com/), [ApostropheCMS](https://apostrophecms.com/), [Novadiscovery](http://www.novadiscovery.com/), [Omics Data Automation](https://www.omicsautomation.com), [Flow Mobile](https://www.flowmobile.app/), [DocIQ](https://www.dociq.io/) and [hundreds of awesome inviduals](https://github.com/sponsors/ueberdosis).
[iFixit](https://www.ifixit.com/), [ApostropheCMS](https://apostrophecms.com/), [Novadiscovery](http://www.novadiscovery.com/), [Omics Data Automation](https://www.omicsautomation.com), [Flow Mobile](https://www.flowmobile.app/), [DocIQ](https://www.dociq.io/) and [hundreds of awesome individuals](https://github.com/sponsors/ueberdosis).

### Contributing
Feel like adding some magic of your own to Tiptap Editor Core? We welcome contributions! Please see our [CONTRIBUTING](CONTRIBUTING.md) guidelines for how to get started.
Expand Down
6 changes: 6 additions & 0 deletions demos/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Change Log

## 2.4.2

### Patch Changes

- d6e56c4: declare lowlight to be a peer dep of extension-code-block-lowlight, update usage to v3

## 2.4.1

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion demos/includeDependencies.txt
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ highlight.js/lib/languages/xml
highlight.js/lib/core
linkifyjs
lowlight
lowlight/lib/core
prosemirror-commands
prosemirror-dropcursor
prosemirror-gapcursor
Expand All @@ -21,6 +20,7 @@ prosemirror-view
react
react-dom
react-dom/client
use-sync-external-store/shim/with-selector
shiki
simplify-js
tippy.js
Expand Down
8 changes: 4 additions & 4 deletions demos/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tiptap-demos",
"version": "2.4.1",
"version": "2.4.2",
"private": true,
"type": "module",
"scripts": {
Expand All @@ -14,13 +14,13 @@
"@lexical/react": "^0.11.1",
"d3": "^7.3.0",
"fast-glob": "^3.2.11",
"highlight.js": "^11.6.0",
"highlight.js": "^11.10.0",
"lexical": "^0.11.1",
"lowlight": "^2.7.0",
"lowlight": "^3.1.0",
"remixicon": "^2.5.0",
"shiki": "^1.10.3",
"simplify-js": "^1.2.4",
"y-prosemirror": "^1.2.9",
"y-prosemirror": "^1.2.11",
"y-webrtc": "^10.3.0",
"yjs": "^13.6.18"
},
Expand Down
14 changes: 12 additions & 2 deletions demos/setup/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -205,8 +205,7 @@ form {
font-size: 0.75rem;
gap: 0.25rem;
line-height: 1.15;
min-height: 1.75rem;
padding: 0.25rem 0.5rem;
padding: 0.3rem 0.5rem;

&.purple-spinner,
&.error {
Expand All @@ -215,6 +214,17 @@ form {
width: 100%;
}

.badge {
background-color: var(--gray-1);
border: 1px solid var(--gray-3);
border-radius: 2rem;
color: var(--gray-5);
font-size: 0.625rem;
font-weight: 700;
line-height: 1;
padding: 0.25rem 0.5rem;
}

&.purple-spinner {
background-color: var(--purple-light);

Expand Down
7 changes: 6 additions & 1 deletion demos/setup/vue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,12 @@ export default function init(name: string, source: any) {

import(`../src/${demoCategory}/${demoName}/${frameworkName}/index.vue`)
.then(module => {
createApp(module.default).mount('#app')
const app = createApp(module.default)

if (typeof module.configureApp === 'function') {
module.configureApp(app)
}
app.mount('#app')
debug()
})
}
8 changes: 4 additions & 4 deletions demos/src/Commands/Cut/React/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ import StarterKit from '@tiptap/starter-kit'
import React, { useCallback } from 'react'

const MenuBar = ({ editor }) => {
if (!editor) {
return null
}

const onCutToStart = useCallback(() => {
editor.chain().cut({ from: editor.state.selection.$from.pos, to: editor.state.selection.$to.pos }, 1).run()
}, [editor])
Expand All @@ -20,6 +16,10 @@ const MenuBar = ({ editor }) => {
editor.chain().cut({ from: editor.state.selection.$from.pos, to: editor.state.selection.$to.pos }, editor.state.doc.nodeSize - 2).run()
}, [editor])

if (!editor) {
return null
}

return (
<div className="control-group">
<div className="button-group">
Expand Down
25 changes: 13 additions & 12 deletions demos/src/Examples/CodeBlockLanguage/React/index.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
// load specific languages only
// import { lowlight } from 'lowlight/lib/core'
// import javascript from 'highlight.js/lib/languages/javascript'
// lowlight.registerLanguage('javascript', javascript)
import './styles.scss'

import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
Expand All @@ -13,16 +9,21 @@ import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml'
// load all highlight.js languages
import { lowlight } from 'lowlight'
// load all languages with "all" or common languages with "common"
import { all, createLowlight } from 'lowlight'
import React from 'react'

import CodeBlockComponent from './CodeBlockComponent.jsx'
// eslint-disable-next-line
import CodeBlockComponent from './CodeBlockComponent'

lowlight.registerLanguage('html', html)
lowlight.registerLanguage('css', css)
lowlight.registerLanguage('js', js)
lowlight.registerLanguage('ts', ts)
// create a lowlight instance
const lowlight = createLowlight(all)

// you can also register individual languages
lowlight.register('html', html)
lowlight.register('css', css)
lowlight.register('js', js)
lowlight.register('ts', ts)

const MenuBar = ({ editor }) => {
if (!editor) {
Expand Down Expand Up @@ -56,7 +57,7 @@ export default () => {
],
content: `
<p>
Thats a boring paragraph followed by a fenced code block:
That's a boring paragraph followed by a fenced code block:
</p>
<pre><code class="language-javascript">for (var i=1; i <= 20; i++)
{
Expand Down
21 changes: 10 additions & 11 deletions demos/src/Examples/CodeBlockLanguage/Vue/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,19 @@ import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml'
// load all highlight.js languages
import { lowlight } from 'lowlight'
// load all languages with "all" or common languages with "common"
import { all, createLowlight } from 'lowlight'
import CodeBlockComponent from './CodeBlockComponent.vue'
lowlight.registerLanguage('html', html)
lowlight.registerLanguage('css', css)
lowlight.registerLanguage('js', js)
lowlight.registerLanguage('ts', ts)
// create a lowlight instance
const lowlight = createLowlight(all)
// load specific languages only
// import { lowlight } from 'lowlight/lib/core'
// import javascript from 'highlight.js/lib/languages/javascript'
// lowlight.registerLanguage('javascript', javascript)
// you can also register languages
lowlight.register('html', html)
lowlight.register('css', css)
lowlight.register('js', js)
lowlight.register('ts', ts)
export default {
components: {
Expand Down Expand Up @@ -63,7 +62,7 @@ export default {
],
content: `
<p>
Thats a boring paragraph followed by a fenced code block:
That's a boring paragraph followed by a fenced code block:
</p>
<pre><code class="language-javascript">for (var i=1; i <= 20; i++)
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<node-view-wrapper class="vue-component">
<label>Vue Component</label>
<ValidateInject />
</node-view-wrapper>
</template>

<script>
import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
import ValidateInject from './ValidateInject.vue'
export default {
components: {
NodeViewWrapper,
ValidateInject,
},
props: nodeViewProps,
}
</script>

<style lang="scss">
.tiptap {
/* Vue component */
.vue-component {
background-color: var(--purple-light);
border: 2px solid var(--purple);
border-radius: 0.5rem;
margin: 2rem 0;
position: relative;
label {
background-color: var(--purple);
border-radius: 0 0 0.5rem 0;
color: var(--white);
font-size: 0.75rem;
font-weight: bold;
padding: 0.25rem 0.5rem;
position: absolute;
top: 0;
}
.content {
margin-top: 1.5rem;
padding: 1rem;
}
}
}
</style>
Loading

0 comments on commit c00fa5c

Please sign in to comment.