Prepare for release 1

README.md

@@ -30,12 +30,10 @@ composer require jacobfitzp/nova-canvas
 Canvas::make('Content')
 ```
 
-[Read our full documentation here](https://jacobfitzp.github.io/nova-canvas-docs/about.html)
+[Read full documentation here](https://jacobfitzp.github.io/nova-canvas-docs/about.html)
 
 ## Contribution
 
-We are looking for contributors to help improve and maintain this package.
-
 ### Bugs
 
 Feel free to open PR's to address bugs, or to perform general maintenance. 

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * vuex v4.1.0
+ * (c) 2022 Evan You
+ * @license MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

package.json

@@ -27,6 +27,7 @@
         "@tiptap/extension-character-count": "^2.4.0",
         "@tiptap/extension-code-block-lowlight": "^2.4.0",
         "@tiptap/extension-dropcursor": "^2.5.7",
+        "@tiptap/extension-link": "^2.5.8",
         "@tiptap/extension-placeholder": "^2.4.0",
         "@tiptap/extension-table": "^2.4.0",
         "@tiptap/extension-table-cell": "^2.4.0",
@@ -37,7 +38,9 @@
         "@tiptap/pm": "^2.4.0",
         "@tiptap/starter-kit": "^2.4.0",
         "@tiptap/vue-3": "^2.4.0",
+        "laravel-nova-ui": "^0.4.12",
         "lowlight": "^3.1.0",
+        "tippy.js": "^6.3.7",
         "tiptap-extension-upload-image": "^1.0.1"
     }
 }

resources/js/components/Modals/InsertLink.vue

@@ -1,45 +1,60 @@
 <template>
     <Modal :show="true">
-        <form
-            @submit.prevent="$emit('confirm')"
-            class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
-        >
+        <div class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
             <slot>
                 <ModalHeader>
                     Insert link
                 </ModalHeader>
                 <ModalContent>
-                    <input
-                        class="form-control form-input form-control-bordered"
-                    />
+                    <Input v-model="link" placeholder="https://example.com" />
                 </ModalContent>
             </slot>
 
             <ModalFooter>
-                <div class="ml-auto">
-                    <link-button
+                <div>
+                    <Button
+                        v-if="value.length > 0"
+                        @click="this.$emit('remove')"
                         type="button"
-                        @click.prevent="this.$emit('close')"
+                        state="danger"
                         class="mr-3"
                     >
-                        Cancel
-                    </link-button>
 
-                    <Button ref="confirmButton" type="submit">
-                        Link
+                        Remove
+                    </Button>
+
+                    <Button
+                        @click="this.$emit('confirm', link)"
+                        type="button"
+                    >
+                        Save
                     </Button>
+
+                    <link-button @click.prevent="this.$emit('cancel')" class="ml-auto">
+                        Cancel
+                    </link-button>
                 </div>
             </ModalFooter>
-        </form>
+        </div>
     </Modal>
 </template>
 
 <script>
-import { Button } from 'laravel-nova-ui'
+import { Button, Input } from 'laravel-nova-ui'
 
 export default {
-    emits: ["close", "confirm"],
-
-    components: { Button },
+    emits: ['cancel', 'remove', 'confirm'],
+    components: { Input, Button },
+    props: {
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            link: this.value
+        }
+    }
 };
 </script>

resources/js/components/Tools/Link.vue

@@ -0,0 +1,76 @@
+<template>
+    <button
+        type="button"
+        class="hover:text-primary-600 disabled:opacity-50"
+        :class="{ 'text-primary-600': isActive }"
+        @click="openModal"
+    >
+        <LinkIcon class="h-5 w-5" />
+    </button>
+
+    <InsertLink
+        v-if="insertingLink"
+        :value="currentLink"
+        @confirm="insertLink"
+        @remove="removeLink"
+        @cancel="insertingLink = false"
+    />
+</template>
+
+<script>
+import tippy from 'tippy.js'
+import BaseTool from './BaseTool'
+import { LinkIcon } from '@heroicons/vue/24/outline'
+import InsertLink from '../Modals/InsertLink.vue'
+
+export default {
+    extends: BaseTool,
+    components: {
+        InsertLink,
+        LinkIcon
+    },
+    data () {
+        return {
+            insertingLink: false
+        }
+    },
+    computed: {
+        isActive () {
+            return this.editor.isActive('link')
+        },
+        currentLink () {
+            return this.editor.getAttributes('link').href
+        }
+    },
+    methods: {
+        /**
+         * Open the insert link modal.
+         */
+        openModal () {
+            this.insertingLink = true
+        },
+
+        /**
+         * Insert the provided link into the selected text.
+         *
+         * @param {String} link
+         */
+        insertLink (link) {
+            this.editor.chain().focus().extendMarkRange('link').setLink({ href: link }).run()
+
+            // Close the insert link modal.
+            this.insertingLink = false
+        },
+
+        /**
+         * Remove the currently selected link.
+         */
+        removeLink () {
+            this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+
+            // Close the insert link modal.
+            this.insertingLink = false
+        }
+    }
+}
+</script>

resources/js/components/Tools/Table.vue

@@ -0,0 +1,3 @@
+<template>
+
+</template>

resources/js/modules/tools/Link.js

@@ -0,0 +1,11 @@
+import LinkComponent from '../../components/Tools/Link.vue'
+import Link from '@tiptap/extension-link'
+
+export default {
+    component: LinkComponent,
+    extension () {
+        return Link.configure({
+            openOnClick: false
+        })
+    }
+}

resources/js/modules/tools/Table.js

@@ -5,12 +5,18 @@ import { TableRow } from '@tiptap/extension-table-row'
 import { TableHeader } from '@tiptap/extension-table-header'
 import { TableCell } from '@tiptap/extension-table-cell'
 
-
 export default {
     icon: TableCellsIcon,
     component: Standard,
     apply (editor) {
-        editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+        editor.chain()
+            .focus()
+            .insertTable({
+                rows: 3,
+                cols: 3,
+                withHeaderRow: true
+            })
+            .run()
     },
     active (editor) {
         return editor.isActive('table')

resources/js/modules/tools/index.js

@@ -16,6 +16,7 @@ import Image from './Image'
 import OrderedList from './OrderedList'
 import BulletList from './BulletList'
 import Table from './Table'
+import Link from './Link'
 import Undo from './History/Undo'
 import Redo from './History/Redo'
 
@@ -37,6 +38,7 @@ export default {
     alignRight: AlignRight,
     orderedList: OrderedList,
     bulletList: BulletList,
+    link: Link,
     undo: Undo,
     redo: Redo,
     // Visual divider between tools, has a shorthand representation of '|'.