diff --git a/.eslintrc.js b/.eslintrc.js index de47e986..44e8122a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -56,6 +56,8 @@ module.exports = { 'no-param-reassign': 'off', 'import/prefer-default-export': 'off', 'consistent-return': 'off', + 'no-redeclare': 'off', + '@typescript-eslint/no-redeclare': ['error'], 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': ['error'], 'no-use-before-define': 'off', diff --git a/.github/workflows/clean-up.yml b/.github/workflows/clean-up.yml index e325c934..9787d5e6 100644 --- a/.github/workflows/clean-up.yml +++ b/.github/workflows/clean-up.yml @@ -17,4 +17,4 @@ jobs: - name: Remove old artifacts uses: c-hive/gha-remove-artifacts@v1 with: - age: '1 week' + age: '1 hour' diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index ddf8fb4e..e827dd9d 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -27,7 +27,7 @@ jobs: - uses: actions/checkout@v2.3.3 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2.1.1 + uses: actions/setup-node@v2.1.2 with: node-version: ${{ matrix.node-version }} @@ -72,7 +72,7 @@ jobs: - uses: actions/checkout@v2.3.3 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2.1.1 + uses: actions/setup-node@v2.1.2 with: node-version: ${{ matrix.node-version }} @@ -87,18 +87,20 @@ jobs: browser: chrome - name: Export screenshots (on failure only) - uses: actions/upload-artifact@v2.1.4 + uses: actions/upload-artifact@v2.2.0 if: failure() with: name: cypress-screenshots path: tests/cypress/screenshots + retention-days: 7 - name: Export screen recordings (on failure only) - uses: actions/upload-artifact@v2.1.4 + uses: actions/upload-artifact@v2.2.0 if: failure() with: name: cypress-videos path: tests/cypress/videos + retention-days: 7 - name: Send Slack notifications uses: act10ns/slack@v1 @@ -125,7 +127,7 @@ jobs: - uses: actions/checkout@v2.3.3 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2.1.1 + uses: actions/setup-node@v2.1.2 with: node-version: ${{ matrix.node-version }} diff --git a/README.md b/README.md index 5d1f0edc..93f4377b 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,9 @@ A renderless and extendable rich-text editor for [Vue.js](https://github.com/vue ## Roadmap - [x] Proof of concept -- [ ] Building out the editor +- [x] Building out the editor - [x] Adding a bunch of extensions -- [ ] Creating a few examples +- [x] Creating a few examples - [ ] Giving sponsors access to gather feedback - [ ] Incorporate feedback - [ ] Publicly release version 2.0-beta diff --git a/docs/gridsome.client.js b/docs/gridsome.client.js new file mode 100644 index 00000000..65d2f3f2 --- /dev/null +++ b/docs/gridsome.client.js @@ -0,0 +1,15 @@ +export default function (Vue, options, context) { + + context.router.afterEach(to => { + if (to.hash) { + setTimeout(() => { + const element = document.getElementById(to.hash.substr(1)) + const top = element.offsetTop + const offset = parseFloat(getComputedStyle(element).scrollMarginTop) + + window.scrollTo(0, top - offset) + }, 0) + } + }) + +} diff --git a/docs/gridsome.config.js b/docs/gridsome.config.js index adb65fb1..c3fb6c70 100644 --- a/docs/gridsome.config.js +++ b/docs/gridsome.config.js @@ -11,7 +11,7 @@ function addStyleResource(rule) { } module.exports = { - siteName: 'tiptap 2', + siteName: 'tiptap', titleTemplate: '%s', port: 3000, plugins: [ diff --git a/docs/package.json b/docs/package.json index c239a4fa..018096b6 100644 --- a/docs/package.json +++ b/docs/package.json @@ -16,26 +16,27 @@ "globby": "^11.0.0", "gridsome": "0.7.21", "gridsome-plugin-simple-analytics": "^1.1.0", - "raw-loader": "^4.0.0", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "portal-vue": "^2.1.7", + "raw-loader": "^4.0.2", + "react": "^17.0.1", + "react-dom": "^17.0.1", "remark-container": "^0.1.2", "remark-toc": "^7.0.0", - "typescript": "^4.0.3", + "typescript": "^4.0.5", "vue-github-button": "^1.1.2", - "vue-live": "^1.14.0", + "vue-live": "^1.15.1", "y-indexeddb": "^9.0.5", "y-webrtc": "^10.1.6", - "yjs": "^13.4.0" + "yjs": "^13.4.1" }, "devDependencies": { "@babel/plugin-proposal-optional-chaining": "^7.11.0", "@babel/preset-env": "^7.11.5", "@babel/preset-react": "^7.10.4", - "html-loader": "^1.3.1", + "html-loader": "^1.3.2", "node-sass": "^4.14.1", - "sass-loader": "^10.0.2", + "sass-loader": "^10.0.3", "style-resources-loader": "^1.3.3", - "ts-loader": "^8.0.4" + "ts-loader": "^8.0.7" } } diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss index a14c2342..a34e38b7 100644 --- a/docs/src/components/Demo/style.scss +++ b/docs/src/components/Demo/style.scss @@ -1,22 +1,23 @@ .demo { - background-color: $colorWhite; overflow: hidden; border-radius: 0.5rem; &__preview { - padding: 1.5rem; - border: 1px solid rgba($colorBlack, 0.1); + padding: 1.25rem; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-width: 0; + color: $colorBlack; + background-color: $colorWhite; } &__source { - // background-color: $colorBlack; + border: 1px solid rgba($colorWhite, 0.1); + background-color: $colorBlack; } &__tabs { - padding: 1rem 1.5rem 0 1.5rem; + padding: 1rem 1.25rem 0 1.25rem; background-color: rgba($colorBlack, 0.9); } @@ -53,18 +54,29 @@ display: flex; justify-content: space-between; width: 100%; - padding: 0.5rem 1.5rem; + padding: 0.5rem 1.25rem; + font-size: 0.85rem; border: 1px solid rgba($colorWhite, 0.1); - border: 1px solid rgba($colorBlack, 0.1); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; border-top-width: 0; - background-color: rgba($colorBlack, 0.9); - color: $colorWhite; + background-color: $colorBlack; + white-space: nowrap; + } + + &__name { + display: none; + + @media (min-width: 600px) { + display: block; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 0.5rem; + } } &__link { - // text-align: right; + margin-left: auto; } &__error { diff --git a/docs/src/components/LiveDemo/CustomLayout.vue b/docs/src/components/LiveDemo/CustomLayout.vue index 10ecd65e..bf817bca 100644 --- a/docs/src/components/LiveDemo/CustomLayout.vue +++ b/docs/src/components/LiveDemo/CustomLayout.vue @@ -46,27 +46,23 @@ export default { border-radius: 0.5rem 0.5rem 0 0; &__preview { - padding: 1.5rem; - border: 1px solid rgba($colorBlack, 0.1); + padding: 1.25rem; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-width: 0; + color: $colorBlack; } &__editor { - background-color: rgba($colorBlack, 0.9); - color: rgba($colorWhite, 0.7); + border: 1px solid rgba($colorWhite, 0.1); + background-color: $colorBlack; } &__editor ::v-deep { .prism-editor-wrapper { overflow: auto; max-height: unquote("max(300px, 60vh)"); - padding: 1.5rem; - - &::-webkit-scrollbar-thumb { - background-color: rgba($colorWhite, 0.25); - } + padding: 1.25rem; } .prism-editor__container { diff --git a/docs/src/components/LiveDemo/index.vue b/docs/src/components/LiveDemo/index.vue index 885f8647..cbab7a99 100644 --- a/docs/src/components/LiveDemo/index.vue +++ b/docs/src/components/LiveDemo/index.vue @@ -36,7 +36,7 @@ query { diff --git a/docs/src/components/LiveDemo/style.scss b/docs/src/components/LiveDemo/style.scss index ce9a5cfa..cf709170 100644 --- a/docs/src/components/LiveDemo/style.scss +++ b/docs/src/components/LiveDemo/style.scss @@ -9,15 +9,6 @@ border-bottom-width: 0; } - &__source { - // background-color: $colorBlack; - } - - &__tabs { - padding: 1rem 1.5rem 0 1.5rem; - background-color: rgba($colorBlack, 0.9); - } - &__tab { display: inline-flex; position: relative; @@ -51,22 +42,16 @@ display: flex; justify-content: space-between; width: 100%; - padding: 0.5rem 1.5rem; + padding: 0.5rem 1.25rem; border: 1px solid rgba($colorWhite, 0.1); - border: 1px solid rgba($colorBlack, 0.1); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; border-top-width: 0; - background-color: rgba($colorBlack, 0.9); - color: $colorWhite; - } - - &__link { - // text-align: right; + background-color: $colorBlack; } &__error { - padding: 1rem 1.5rem; + padding: 1.25rem; color: $colorRed; background-color: rgba($colorRed, 0.1); } diff --git a/docs/src/components/PageNavigation/style.scss b/docs/src/components/PageNavigation/style.scss index 21161f90..1583320c 100644 --- a/docs/src/components/PageNavigation/style.scss +++ b/docs/src/components/PageNavigation/style.scss @@ -1,14 +1,16 @@ .page-navigation { display: flex; justify-content: space-between; - padding: 3rem 0; + padding: 1.5rem 0; &__link { - font-weight: 500; - color: rgba($colorBlack, 0.6); + color: rgba($colorWhite, 0.6); + padding: 0.25rem 0.5rem; + border-radius: 5px; &:hover { - color: $colorBlack; + color: $colorWhite; + background-color: rgba($colorWhite, 0.05); } } -} \ No newline at end of file +} diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue index 5fe494f4..38fabd2a 100644 --- a/docs/src/demos/Examples/Basic/index.vue +++ b/docs/src/demos/Examples/Basic/index.vue @@ -1,6 +1,5 @@