Merge branch 'main' into feature/live-demo

This commit is contained in:
Philipp Kühn
2020-10-01 21:41:23 +02:00
22 changed files with 112 additions and 58 deletions

View File

@@ -3,7 +3,13 @@
name: build
on: [push]
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
lint:
@@ -18,15 +24,25 @@ jobs:
steps:
- uses: actions/checkout@v2.3.3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2.1.1
with:
node-version: ${{ matrix.node-version }}
- uses: actions/checkout@v2.3.3
- name: Load cached dependencies
uses: actions/cache@v2
id: cache
with:
path: |
**/node_modules
/home/runner/.cache/Cypress
key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
- name: Install dependencies
id: install-dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: yarn install
- name: Lint code
@@ -44,8 +60,6 @@ jobs:
test:
runs-on: ubuntu-latest
needs: lint
env:
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
@@ -55,18 +69,18 @@ jobs:
steps:
- uses: actions/checkout@v2.3.3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2.1.1
with:
node-version: ${{ matrix.node-version }}
- uses: actions/checkout@v2.3.3
- name: Run tests with Cypress
id: cypress
uses: cypress-io/github-action@v2
with:
cache-key: node-v${{ matrix.node }}-on-${{ runner.os }}-hash-${{ hashFiles('yarn.lock') }}
cache-key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
start: yarn start
wait-on: 'http://localhost:3000'
project: ./tests
@@ -97,7 +111,7 @@ jobs:
build:
runs-on: ubuntu-latest
needs: test
needs: lint
env:
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
@@ -108,15 +122,25 @@ jobs:
steps:
- uses: actions/checkout@v2.3.3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2.1.1
with:
node-version: ${{ matrix.node-version }}
- uses: actions/checkout@v2.3.3
- name: Load cached dependencies
uses: actions/cache@v2
id: cache
with:
path: |
**/node_modules
/home/runner/.cache/Cypress
key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
- name: Install dependencies
id: install-dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: yarn install
- name: Build packages dependencies

View File

@@ -13,7 +13,7 @@ A renderless and extendable rich-text editor for [Vue.js](https://github.com/vue
## Roadmap
- [x] Proof of concept
- [ ] Building out the editor
- [ ] Adding a bunch of extensions
- [x] Adding a bunch of extensions
- [ ] Creating a few examples
- [ ] Giving sponsors access to gather feedback
- [ ] Incorporate feedback

View File

@@ -75,7 +75,7 @@ module.exports = function (api) {
config.module
.rule('jsx')
.test(/\.jsx?$/)
.test(/\.jsx$/)
.use()
.loader('babel-loader')

View File

@@ -1,5 +1,5 @@
<template>
<div></div>
<div />
</template>
<script>

View File

@@ -1,4 +1,4 @@
import {
import React, {
useState, useRef, useEffect, createContext, useContext,
} from 'react'
import { Editor as Tiptap } from '@tiptap/core'

View File

@@ -1,4 +1,4 @@
import { useState } from 'react'
import React, { useState } from 'react'
import extensions from '@tiptap/starter-kit'
import { useEditor, Editor } from './components/Editor'

View File

@@ -1,5 +1,9 @@
# Commands
## Table of Contents
## Introduction
## Chain commands
```js

View File

@@ -1,8 +1,10 @@
# Editor
This class is a central building block of tiptap. It does most of the heavy lifting of creating a working [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on.
## Table of Contents
## Introduction
This class is a central building block of tiptap. It does most of the heavy lifting of creating a working [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on.
## Configuration
| Setting | Type | Default | Description |
| ------------------ | --------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

View File

@@ -1,8 +1,10 @@
# Events
The editor fires a few different events that you can hook into. There are two ways to register event listeners:
## Table of Contents
## Introduction
The editor fires a few different events that you can hook into. There are two ways to register event listeners:
## Option 1: Right-away
You can define your event listeners on a new editor instance right-away:

View File

@@ -1,8 +1,10 @@
# Extensions
Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap.
## Table of Contents
## Introduction
Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap.
## A minimalist set of extensions
Youll need at least three extensions: `Document`, `Paragraph` and `Text`. See [an example of a tiptap version for minimalists](/examples/minimalist).

View File

@@ -1,4 +1,5 @@
# Blockquote
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great you might have guessed to use quotes in the editor.
Type <code>>&nbsp;</code> at the beginning of a new line and it will magically transform to a blockquote.

View File

@@ -1,4 +1,8 @@
# Keyboard Shortcuts
## Table of Contents
## Introduction
Keyboard shortcuts may be strings like `'Shift-Control-Enter'`. Keys are based on the strings that can appear in `event.key`, concatenated with a `-`. There is a little tool called [keycode.info](https://keycode.info/), which shows the `event.key` interactively.
Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held). You may use `Space` as an alias for the <code>&nbsp;</code>.
@@ -7,8 +11,6 @@ Modifiers can be given in any order. `Shift`, `Alt`, `Control` and `Cmd` are rec
You can use `Mod` as a shorthand for `Cmd` on Mac and `Control` on other platforms.
## Table of Contents
## Overwrite keyboard shortcuts
```js

View File

@@ -1,12 +1,14 @@
# Schema
## Table of Contents
## Introduction
Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. That enables you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
This schema is *very* strict. You cant use any HTML element or attribute that is not defined in your schema.
Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, dont have any extension that handles `strong` tags registered, youll only see `This is important` without the strong tags.
## Table of Contents
## How a schema looks like
The most simple schema for a typical *ProseMirror* editor is looking something like that:

View File

@@ -1,8 +1,10 @@
# Configuration
In its simplest version tiptap comes very raw. There is no menu, no buttons, no styling. Thats intended. See tiptap as your building blocks to build exactly the editor you would like to have.
# Build your editor
## Table of Contents
## Introduction
In its simplest version tiptap comes very raw. There is no menu, no buttons, no styling. Thats intended. See tiptap as your building blocks to build exactly the editor you would like to have.
## Adding a menu
Lets start to add your first button to the editor. Once initiated the editor has a powerful API. The so called *commands* allow you to modify selected text (and tons of other things). Here is an example with one single button:

View File

@@ -1,8 +1,10 @@
# Configuration
tiptap is all about customization. There are a ton of options to configure the behavior and functionality of the editor. Most of those settings can be set before creating the Editor. Give tiptap a JSON with all the settings you would like to overwrite.
## Table of Contents
## Introduction
tiptap is all about customization. There are a ton of options to configure the behavior and functionality of the editor. Most of those settings can be set before creating the Editor. Give tiptap a JSON with all the settings you would like to overwrite.
## Overwrite the default settings
See an example with `autoFocus: true` here:

View File

@@ -1,8 +1,10 @@
# Custom Extensions
Lets extend tiptap with a custom extension!
## Table of Contents
## Introduction
Lets extend tiptap with a custom extension!
## Option 1: Change defaults
Lets say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the default youd like to change. In that case, the keyboard shortcut, and just that.

View File

@@ -1,8 +1,10 @@
# Custom styling
Tiptap is renderless, that doesnt mean there is no styling provided. You can decided how your editor should look like.
## Table of Contents
## Introduction
Tiptap is renderless, that doesnt mean there is no styling provided. You can decided how your editor should look like.
## Option 1: Style the plain HTML
The whole editor is rendered inside of a container with the class `.ProseMirror`. You can use that to scope your styling to the editor content:

View File

@@ -1,8 +1,10 @@
# Getting started
tiptap is framework-agnostic and works with Vue.js and React. It even works with plain JavaScript, if thats your thing. To keep everything as small as possible, we put the code to use tiptap with those frameworks in different packages.
## Table of Contents
## Introduction
tiptap is framework-agnostic and works with Vue.js and React. It even works with plain JavaScript, if thats your thing. To keep everything as small as possible, we put the code to use tiptap with those frameworks in different packages.
## 1. Install the dependencies
We assume you already have a [Vue.js](https://cli.vuejs.org/) (or [Nuxt.js](https://nuxtjs.org/)) project. To connect tiptap with Vue.js you are going to need an adapter. You can install tiptap for Vue.js as a dependency in your project:

View File

@@ -1,4 +1,8 @@
# Store content
## Table of Contents
## Introduction
You can store your content as a JSON object or as a good old HTML string. Both work fine. And of course, you can pass both formats to the editor to restore your content.
You can store your content as JSON and restore the content from HTML, or the other way around. I dont know why you would do that, but tiptap wouldnt care.

View File

@@ -21,6 +21,7 @@
"reset": "yarn clean:packages && rm -rf ./**/.cache && rm -rf ./**/node_modules && rm -rf ./yarn.lock && yarn install"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/preset-env": "^7.11.5",

View File

@@ -29,7 +29,7 @@
"prosemirror-state": "^1.3.3",
"prosemirror-tables": "^1.1.1",
"prosemirror-utils": "^0.9.6",
"prosemirror-view": "^1.15.6"
"prosemirror-view": "^1.16.0"
},
"scripts": {
"build": "microbundle"

View File

@@ -18,7 +18,7 @@
invariant "^2.2.4"
semver "^5.5.0"
"@babel/core@^7.0.0", "@babel/core@^7.10.2", "@babel/core@^7.11.0":
"@babel/core@^7.0.0", "@babel/core@^7.10.2", "@babel/core@^7.11.0", "@babel/core@^7.11.6":
version "7.11.6"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.11.6.tgz#3a9455dc7387ff1bac45770650bc13ba04a15651"
integrity sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==
@@ -3920,9 +3920,9 @@ caniuse-api@^3.0.0:
lodash.uniq "^4.5.0"
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001135:
version "1.0.30001140"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001140.tgz#30dae27599f6ede2603a0962c82e468bca894232"
integrity sha512-xFtvBtfGrpjTOxTpjP5F2LmN04/ZGfYV8EQzUIC/RmKpdrmzJrjqlJ4ho7sGuAMPko2/Jl08h7x9uObCfBFaAA==
version "1.0.30001141"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001141.tgz#214a196d81aa938b268fb0cb6d8fab23fdf14378"
integrity sha512-EHfInJHoQTmlMdVZrEc5gmwPc0zyN/hVufmGHPbVNQwlk7tJfCmQ2ysRZMY2MeleBivALUTyyxXnQjK18XrVpA==
case-sensitive-paths-webpack-plugin@^2.2.0:
version "2.3.0"
@@ -4771,9 +4771,9 @@ css-what@2.1:
integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
css-what@^3.2.1:
version "3.3.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39"
integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==
version "3.4.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.0.tgz#f8d042a1ebb31a8251e64d2a0f0ec3fee9a05267"
integrity sha512-HA4iK1F5BEjbfSAguPk03XboiTvzS0tsqkoSJhkZVf52TgigRpIRGXtvSGRVgHcr1ln1Ubqx2flxKFwtY3kX9A==
cssesc@^2.0.0:
version "2.0.0"
@@ -5625,37 +5625,37 @@ error-stack-parser@^2.0.0:
stackframe "^1.1.1"
es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
version "1.17.6"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
version "1.17.7"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
dependencies:
es-to-primitive "^1.2.1"
function-bind "^1.1.1"
has "^1.0.3"
has-symbols "^1.0.1"
is-callable "^1.2.0"
is-regex "^1.1.0"
object-inspect "^1.7.0"
is-callable "^1.2.2"
is-regex "^1.1.1"
object-inspect "^1.8.0"
object-keys "^1.1.1"
object.assign "^4.1.0"
object.assign "^4.1.1"
string.prototype.trimend "^1.0.1"
string.prototype.trimstart "^1.0.1"
es-abstract@^1.18.0-next.0:
version "1.18.0-next.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
version "1.18.0-next.1"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
dependencies:
es-to-primitive "^1.2.1"
function-bind "^1.1.1"
has "^1.0.3"
has-symbols "^1.0.1"
is-callable "^1.2.0"
is-callable "^1.2.2"
is-negative-zero "^2.0.0"
is-regex "^1.1.1"
object-inspect "^1.8.0"
object-keys "^1.1.1"
object.assign "^4.1.0"
object.assign "^4.1.1"
string.prototype.trimend "^1.0.1"
string.prototype.trimstart "^1.0.1"
@@ -7385,9 +7385,9 @@ hex-color-regex@^1.1.0:
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
highlight.js@^10.2.0:
version "10.2.0"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.2.0.tgz#367151bcf813adebc54822f1cb51d2e1e599619f"
integrity sha512-OryzPiqqNCfO/wtFo619W+nPYALM6u7iCQkum4bqRmmlcTikOkmlL06i009QelynBPAlNByTQU6cBB2cOBQtCw==
version "10.2.1"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.2.1.tgz#09784fe2e95612abbefd510948945d4fe6fa9668"
integrity sha512-A+sckVPIb9zQTUydC9lpRX1qRFO/N0OKEh0NwIr65ckvWA/oMY8v9P3+kGRK3w2ULSh9E8v5MszXafodQ6039g==
hirestime@^3.2.1:
version "3.2.2"
@@ -7971,7 +7971,7 @@ is-buffer@^2.0.0:
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
is-callable@^1.1.4, is-callable@^1.2.0:
is-callable@^1.1.4, is-callable@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
@@ -8223,7 +8223,7 @@ is-reference@^1.1.2, is-reference@^1.2.1:
dependencies:
"@types/estree" "*"
is-regex@^1.1.0, is-regex@^1.1.1:
is-regex@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
@@ -10072,7 +10072,7 @@ object-copy@^0.1.0:
define-property "^0.2.5"
kind-of "^3.0.3"
object-inspect@^1.7.0, object-inspect@^1.8.0:
object-inspect@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
@@ -10094,7 +10094,7 @@ object-visit@^1.0.0:
dependencies:
isobject "^3.0.0"
object.assign@^4.1.0:
object.assign@^4.1.0, object.assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
@@ -11431,10 +11431,10 @@ prosemirror-utils@^0.9.6:
resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz#3d97bd85897e3b535555867dc95a51399116a973"
integrity sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==
prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.15.6:
version "1.15.7"
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.15.7.tgz#b6ce82a08b7ffa8ff06b64ab36ec357229c66aa6"
integrity sha512-fSSXphXg+82qb4xNsHT0mX6ro0Wu1/l+WIFO5jYfyjd42r6ZWSg0gFItLgqOVPxoKQOlrPJUhrozTxiqx0EXOg==
prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.16.0:
version "1.16.0"
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.16.0.tgz#024440a8e9acbbb5826572eef58c21c11cd1e454"
integrity sha512-iFtStCw2byF0yLc3mm1ezGdFSd6SWM4pnJod+ZaJiU5ju36QdYM4Xwa+qNm/AaI2/MgxpJqi8jsGWOJNkeBQ/Q==
dependencies:
prosemirror-model "^1.1.0"
prosemirror-state "^1.0.0"