Add CI, docs, sandbox; automate releases (#2)

* Add test workflow * Add publish workflow * Clean up existing READMEs * Beautify workflow names; fix NPM publish bug * Enhance README; add demo; align with playground * Add sandbox to README
xeger · Jul 1, 2022 · e375588 · e375588
1 parent 81cf7ee
commit e375588
Show file tree

Hide file tree

Showing 11 changed files with 206 additions and 134 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,62 @@
+name: Build and Publish
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    name: Build and Publish
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: Set Package Versions
+        run: |
+          release='${{ github.event.release.tag_name }}'
+          version=`echo $release | cut -b2-`
+          if ! echo $release | grep -q '^v[0-9]\+\.[0-9]\+\.[0-9]\+$'; then
+            echo "Release name must be in the format of 'vX.Y.Z', got '$release'"
+            exit 1
+          fi
+          for pkg in packages/*; do
+            pushd $pkg
+            sed -i -r "s/\"version\": *\".+\"/\"version\": \"$version\"/" package.json
+            popd
+          done
+      - name: Install Dependencies
+        run: npm ci
+      - name: Build Packages
+        run: |
+          npm run clean # for paranoia
+          npm run build
+      - name: Publish to NPM
+        run: |
+          touch $HOME/.npmrc
+          chmod 0600 $HOME/.npmrc
+          cat << EOF > ~/.npmrc
+          //registry.npmjs.org/:_authToken=${NPM_TOKEN}
+          @xeger:registry=https://registry.npmjs.org/
+          EOF
+          npm publish --workspaces
+        env:
+          NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
+      - name: Publish to GitHub
+        run: |
+          touch $HOME/.npmrc
+          chmod 0600 $HOME/.npmrc
+          cat << EOF > ~/.npmrc
+          //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+          @xeger:registry=https://npm.pkg.github.com/
+          EOF
+          npm publish --workspaces
+        env:
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,27 @@
+name: Test
+
+on:
+  - pull_request
+  - push
+
+jobs:
+  e2e:
+    name: E2E
+
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node16.13.2-chrome100-ff98
+      options: --user 1001
+
+    strategy:
+      matrix:
+        browser: ["chrome", "firefox"]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: cypress run
+        uses: cypress-io/github-action@v4
+        with:
+          browser: ${{ matrix.browser }}
+          build: npm run build
+          start: npm start
diff --git a/README.md b/README.md
@@ -1,10 +1,14 @@
 # Quill Image
 
-This repository contains a pair of extensions for the [Quill rich text editor](https://quilljs.com/) that improves the styling of images embedded in the editor and adds an intuitive UI for applying styles.
+This is a set of Quill modules, designed to be used together, that fully integrate with the Quill Delta format to provide resizable, floatable images independent from the HTML DOM.
 
 ![Image actions overlay](assets/screenshot.png)
 
-It is a fork and rewrite of [quill-blot-formatter](https://www.npmjs.com/package/quill-blot-formatter) that varies in the following ways:
+Visit our [code sandbox](https://8fn0sp.csb.app/) to try it out yourself.
+
+## History
+
+It is a fork and rewrite of [quill-blot-formatter](https://www.npmjs.com/package/quill-blot-formatter) that makes the following improvements:
 
 1. Functionality is decomposed into two packages: `@xeger/quill-image-formats` which extends Quill's built-in `Image` blot with new formats; and `@xeger/quill-image-actions` which contains the UI for applying and removing those formats.
 1. Instead of applying `align` (an existing block format) to images, we define a new `float` format which allows text to wrap naturally around images.
@@ -18,48 +22,37 @@ It is a fork and rewrite of [quill-blot-formatter](https://www.npmjs.com/package
 
 ### With a Plain HTML Page
 
-Load the Quill bundle, import the extension modules, register them with the Quill framework, and instantiate an editor. Make sure to include the formats and modules in the editor's configuration!
+In your `head`, load the Quill bundle.
 
 ```html
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
-    <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
-  </head>
-  <body>
-    <div id="editor" />
-    <script type="module">
-      import { ImageActions } from 'TODO';
-      import { ImageFormats } from 'TODO';
-
-      Quill.register('modules/imageActions', ImageActions);
-      Quill.register('modules/imageFormats', ImageFormats);
-
-      const quill = new Quill('#editor', {
-        formats: ['align', 'float'],
-        modules: {
-          imageActions: {},
-          imageFormats: {},
-          toolbar: [
-            [{ 'align': [] }],
-            ['clean']
-          ]
-        },
-        theme: 'snow'
-      });
-
-      quill.on('text-change',
-        () => console.log(quill.getContents().ops)
-      );
-    </script>
-  </body>
-</html>
+<head>
+  <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
+  <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
+</head>
 ```
 
+Then, in a module-type `script` tag, import the extensions.
+
+```html
+  <script type="module">
+    import { ImageActions } from 'https://cdn.jsdelivr.net/npm/@xeger/quill-image-actions/lib/index.js';
+    import { ImageFormats } from 'https://cdn.jsdelivr.net/npm/@xeger/quill-image-formats/lib/index.js';
+
+    // TODO: Register the modules with Quill singleton
+    // TODO: Instantiate a Quill instance w/ suitable configuration
+```
+
+See [the demo page](assets/demo.html) for a complete, working example.
+
 ### With a React Project
 
+Add the dependencies to your project.
+
+```shell
+npm install @xeger/quill-image-actions --save-prod
+npm install @xeger/quill-image-formats --save-prod
+```
+
 At startup, import the extension modules and register them with `react-quill`'s wrapper of the Quill framework.
 
 ```typescript

diff --git a/assets/demo.html b/assets/demo.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
+  <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
+</head>
+
+<body>
+  <div id="editor">
+    <img src="https://raw.githubusercontent.com/xeger/quill-image/main/assets/256x256.png" style="float: left" />
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Et tortor at risus viverra adipiscing at in
+    tellus integer. Lectus urna duis convallis convallis tellus id interdum. Pellentesque elit eget gravida cum.
+    Dignissim suspendisse in est ante in. Eu facilisis sed odio morbi quis commodo odio aenean sed. Ipsum nunc aliquet
+    bibendum enim facilisis gravida. Nulla malesuada pellentesque elit eget. Varius duis at consectetur lorem donec
+    massa sapien faucibus. Integer malesuada nunc vel risus commodo. Et egestas quis ipsum suspendisse ultrices gravida
+    dictum fusce. Risus commodo viverra maecenas accumsan lacus vel. Volutpat sed cras ornare arcu dui vivamus arcu
+    felis bibendum.
+  </div>
+  <script type="module">
+    import { ImageActions } from 'https://cdn.jsdelivr.net/npm/@xeger/quill-image-actions/lib/index.js';
+    import { ImageFormats } from 'https://cdn.jsdelivr.net/npm/@xeger/quill-image-formats/lib/index.js';
+
+    Quill.register('modules/imageActions', ImageActions);
+    Quill.register('modules/imageFormats', ImageFormats);
+
+    const quill = new Quill('#editor', {
+      formats: ['align', 'background', 'blockquote', 'bold', 'code-block', 'color', 'float', 'font', 'header', 'height', 'image', 'italic', 'link', 'script', 'strike', 'size', 'underline', 'width'],
+      modules: {
+        imageActions: {},
+        imageFormats: {},
+        toolbar: [
+          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+          ['blockquote', 'code-block'],
+
+          [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+          [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
+          [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
+          [{ 'direction': 'rtl' }],                         // text direction
+
+          [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+          [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+          [{ 'font': [] }],
+          [{ 'align': [] }],
+
+          ['clean']
+        ]
+      },
+      theme: 'snow'
+    });
+
+    quill.on('text-change',
+      () => console.log(quill.getContents().ops)
+    );
+  </script>
+</body>
+
+</html>
diff --git a/assets/playground.html b/assets/playground.html
@@ -11,40 +11,18 @@
   <div id="sxs" style="display: flex; flex-direction: row;">
     <div id="sxs__left" style="flex-basis: 50%;">
       <div id="editor" style="height: 80vh">
-        <img src="/assets/256x256.png" /> The quick red fox jumped over the lazy brown dog. The quick
-        red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox
-        jumped
-        over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the
-        lazy
-        brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog.
-        The
-        quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red
-        fox
-        jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over
-        the
-        lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown
-        dog.
-        The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick
-        red
-        fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped
-        over
-        the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy
-        brown
-        dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The
-        quick
-        red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox
-        jumped
-        over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the
-        lazy
-        brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog.
-        The
-        quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red
-        fox
-        jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over
-        the
-        lazy brown dog. The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown
-        dog.
-        The quick red fox jumped over the lazy brown dog. The quick red fox jumped over the lazy brown dog.
+        <img src="/assets/256x256.png" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+        incididunt ut labore et dolore magna
+        aliqua. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Et tortor at risus viverra adipiscing at
+        in
+        tellus integer. Lectus urna duis convallis convallis tellus id interdum. Pellentesque elit eget gravida cum.
+        Dignissim suspendisse in est ante in. Eu facilisis sed odio morbi quis commodo odio aenean sed. Ipsum nunc
+        aliquet
+        bibendum enim facilisis gravida. Nulla malesuada pellentesque elit eget. Varius duis at consectetur lorem donec
+        massa sapien faucibus. Integer malesuada nunc vel risus commodo. Et egestas quis ipsum suspendisse ultrices
+        gravida
+        dictum fusce. Risus commodo viverra maecenas accumsan lacus vel. Volutpat sed cras ornare arcu dui vivamus arcu
+        felis bibendum.
       </div>
     </div>
     <div id="sxs__right" style="flex-basis: 50%;">

diff --git a/assets/screenshot.png b/assets/screenshot.png
diff --git a/package.json b/package.json
@@ -19,8 +19,9 @@
     "serve-handler": "^6.1.3"
   },
   "scripts": {
-    "start": "run-p serve cy:open",
-    "cy:open": "cypress open --e2e",
-    "serve": "bin/serve"
+    "start": "bin/serve",
+    "build": "npm run build --workspaces",
+    "clean": "npm run clean --workspaces",
+    "cy:open": "cypress open --e2e"
   }
 }
diff --git a/packages/quill-image-actions/README.md b/packages/quill-image-actions/README.md
@@ -1,33 +1,5 @@
-# Quill Embed Actions
+# Quill Image Actions
 
-# What is this?
+This is a Quill module that provides resizable, floatable images independent from the HTML DOM. It is designed to be used together with `@xeger/quill-image-formats`.
 
-This is a derivation of
-[quill-blot-formatter](https://github.com/Fandom-OSS/quill-blot-formatter)
-that fully integrates with the Quill Delta format to provide resizable,
-floatable images independent from the HTML DOM. This module is ported
-from Flow to TypeScript and built with a modern toolchain.
-
-# How do I use it?
-
-TODO
-
-# Contributing to the Project
-
-## Building the repo
-
-```sh
-npm run build
-```
-
-## Type-checking the repo
-
-```sh
-npm run type-check
-```
-
-And to run in `--watch` mode:
-
-```sh
-npm run type-check:watch
-```
+For more information, please see [combined README](https://github.com/xeger/quill-image#readme).
diff --git a/packages/quill-image-actions/package.json b/packages/quill-image-actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xeger/quill-image-actions",
-  "version": "0.5.0",
+  "version": "0.0.0",
   "license": "MIT",
   "packageManager": "[email protected]",
   "private": false,

diff --git a/packages/quill-image-formats/README.md b/packages/quill-image-formats/README.md
@@ -1,29 +1,5 @@
 # Quill Image Formats
 
-# What is this?
+This is a Quill module that provides resizable, floatable images independent from the HTML DOM. It is designed to be used together with `@xeger/quill-image-actions`.
 
-TODO
-
-# How do I use it?
-
-TODO
-
-# Contributing to the Project
-
-## Building the repo
-
-```sh
-npm run build
-```
-
-## Type-checking the repo
-
-```sh
-npm run type-check
-```
-
-And to run in `--watch` mode:
-
-```sh
-npm run type-check:watch
-```
+For more information, please see [combined README](https://github.com/xeger/quill-image#readme).
diff --git a/packages/quill-image-formats/package.json b/packages/quill-image-formats/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xeger/quill-image-formats",
-  "version": "0.5.0",
+  "version": "0.0.0",
   "license": "MIT",
   "packageManager": "[email protected]",
   "private": false,