feat!: lowlight no prefix variables, added custom Image extension

modbender · Sep 9, 2024 · 7b23f85 · 7b23f85
1 parent 1f4bdaa
commit 7b23f85
Show file tree

Hide file tree

Showing 29 changed files with 1,006 additions and 103 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitepress';
+import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -20,7 +20,7 @@ export default defineConfig({
     [
       'script',
       {},
-      "window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-Z1D6HCTHXL');",
+      'window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag(\'js\', new Date());\ngtag(\'config\', \'G-Z1D6HCTHXL\');',
     ],
   ],
 
@@ -65,4 +65,4 @@ export default defineConfig({
       },
     ],
   },
-});
+})
diff --git a/docs/examples/lowlight.md b/docs/examples/lowlight.md
@@ -34,11 +34,11 @@ The extension is already installed by default with Nuxt Tiptap Editor plugin.
    Adding to the prefix in configuration it becomes `Tiptapcommon` and `Tiptapfull`.
 
    ```js
-   const lowlight = TiptapcreateLowlight(Tiptapcommon); //Common languages
+   const lowlight = createLowlight(Tiptapcommon); //Common languages
 
    // or
 
-   const lowlight = TiptapcreateLowlight(Tiptapall); //All languages
+   const lowlight = createLowlight(Tiptapall); //All languages
    ```
 
    Copy the code to your own `components/TiptapEditor.vue`.  
@@ -172,7 +172,7 @@ The extension is already installed by default with Nuxt Tiptap Editor plugin.
    </template>
 
    <script setup>
-   const lowlight = TiptapcreateLowlight(Tiptapall);
+   const lowlight = createLowlight(allLanguages);
 
    const editor = useEditor({
      extensions: [

diff --git a/playground/app.vue b/playground/app.vue
@@ -1,3 +1,5 @@
 <template>
-  <NuxtPage />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
diff --git a/playground/components/TipTap.vue b/playground/components/TipTap.vue
@@ -130,3 +130,18 @@ const editor = useEditor({
   extensions: [TiptapStarterKit],
 });
 </script>
+
+<style scoped>
+button {
+  border-radius: 3px;
+  background-image: linear-gradient(
+    to top,
+    rgb(207, 207, 207) 16%,
+    rgb(252, 252, 252) 79%
+  );
+  padding: 3px;
+  border: 1px solid #000;
+  color: black;
+  text-decoration: none;
+}
+</style>
diff --git a/playground/components/TipTapImage.vue b/playground/components/TipTapImage.vue
@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <button
+        :disabled="!editor.can().chain().focus().toggleBold().run()"
+        :class="{ 'is-active': editor.isActive('bold') }"
+        @click="editor.chain().focus().toggleBold().run()"
+      >
+        bold
+      </button>
+      <button
+        :disabled="!editor.can().chain().focus().toggleItalic().run()"
+        :class="{ 'is-active': editor.isActive('italic') }"
+        @click="editor.chain().focus().toggleItalic().run()"
+      >
+        italic
+      </button>
+      <button
+        :disabled="!editor.can().chain().focus().toggleStrike().run()"
+        :class="{ 'is-active': editor.isActive('strike') }"
+        @click="editor.chain().focus().toggleStrike().run()"
+      >
+        strike
+      </button>
+      <button
+        :disabled="!editor.can().chain().focus().toggleCode().run()"
+        :class="{ 'is-active': editor.isActive('code') }"
+        @click="editor.chain().focus().toggleCode().run()"
+      >
+        code
+      </button>
+      <button @click="editor.chain().focus().unsetAllMarks().run()">
+        clear marks
+      </button>
+      <button @click="editor.chain().focus().clearNodes().run()">
+        clear nodes
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('paragraph') }"
+        @click="editor.chain().focus().setParagraph().run()"
+      >
+        paragraph
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+        @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+      >
+        h1
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+        @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+      >
+        h2
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+        @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+      >
+        h3
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+        @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+      >
+        h4
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
+        @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
+      >
+        h5
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
+        @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
+      >
+        h6
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('bulletList') }"
+        @click="editor.chain().focus().toggleBulletList().run()"
+      >
+        bullet list
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('orderedList') }"
+        @click="editor.chain().focus().toggleOrderedList().run()"
+      >
+        ordered list
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('codeBlock') }"
+        @click="editor.chain().focus().toggleCodeBlock().run()"
+      >
+        code block
+      </button>
+      <button
+        :class="{ 'is-active': editor.isActive('blockquote') }"
+        @click="editor.chain().focus().toggleBlockquote().run()"
+      >
+        blockquote
+      </button>
+      <button @click="editor.chain().focus().setHorizontalRule().run()">
+        horizontal rule
+      </button>
+      <button @click="editor.chain().focus().setHardBreak().run()">
+        hard break
+      </button>
+      <button
+        :disabled="!editor.can().chain().focus().undo().run()"
+        @click="editor.chain().focus().undo().run()"
+      >
+        undo
+      </button>
+      <button
+        :disabled="!editor.can().chain().focus().redo().run()"
+        @click="editor.chain().focus().redo().run()"
+      >
+        redo
+      </button>
+    </div>
+    <TiptapEditorContent :editor="editor" />
+  </div>
+</template>
+
+<script setup>
+const toast = useToast();
+
+async function uploadImage(file, id) {
+  try {
+    const formData = new FormData();
+    formData.append(id, file);
+
+    const urls = await $fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    });
+
+    console.log(urls);
+
+    return urls[0];
+  } catch (e) {
+    return toast.add({
+      severity: 'error',
+      summary: e.statusMessage,
+      detail: e.statusMessage,
+      life: 3000,
+    });
+  }
+}
+
+const editor = useEditor({
+  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
+  extensions: [
+    TiptapStarterKit,
+    TiptapImage,
+    TiptapImageUpload.configure({
+      acceptMimes: ['image/jpeg', 'image/gif', 'image/png', 'image/jpg'],
+      upload: uploadImage,
+    }),
+    TiptapImagePlaceholder.configure({
+      inline: false,
+    }),
+  ],
+});
+</script>
+
+<style scoped>
+button {
+  border-radius: 3px;
+  background-image: linear-gradient(
+    to top,
+    rgb(207, 207, 207) 16%,
+    rgb(252, 252, 252) 79%
+  );
+  padding: 3px;
+  border: 1px solid #000;
+  color: black;
+  text-decoration: none;
+}
+</style>
diff --git a/playground/components/TipTapLowlight.vue b/playground/components/TipTapLowlight.vue
@@ -125,10 +125,10 @@
 </template>
 
 <script setup>
-const lowlight = TiptapcreateLowlight(Tiptapcommon);
+const lowlight = createLowlight(commonLanguages)
 
 const editor = useEditor({
-  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
+  content: '<p>I\'m running Tiptap with Vue.js. 🎉</p>',
   extensions: [
     TiptapStarterKit.configure({
       codeBlock: false,
@@ -137,5 +137,20 @@ const editor = useEditor({
       lowlight,
     }),
   ],
-});
+})
 </script>
+
+<style scoped>
+button {
+  border-radius: 3px;
+  background-image: linear-gradient(
+    to top,
+    rgb(207, 207, 207) 16%,
+    rgb(252, 252, 252) 79%
+  );
+  padding: 3px;
+  border: 1px solid #000;
+  color: black;
+  text-decoration: none;
+}
+</style>
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div>
+      <Menubar class="rounded-none" :model="items" />
+    </div>
+    <main class="container max-w-5xl mx-auto my-5 px-2">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup>
+const items = ref([
+  {
+    label: 'Home',
+    icon: 'pi pi-home',
+    url: '/',
+  },
+]);
+</script>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,12 +1,31 @@
+import Aura from '@primevue/themes/aura';
+
 export default defineNuxtConfig({
-  modules: ['../src/module'],
+  css: ['primeicons/primeicons.css'],
+
+  modules: ['../src/module', '@nuxtjs/tailwindcss', '@primevue/nuxt-module'],
+
+  devtools: { enabled: true },
+  compatibilityDate: '2024-07-25',
 
   tiptap: {
     lowlight: {
       theme: 'github-dark',
     },
   },
 
-  devtools: { enabled: true },
-  compatibilityDate: '2024-07-25',
-});
+  primevue: {
+    components: {
+      exclude: ['Chart', 'Editor'],
+    },
+    options: {
+      theme: {
+        preset: Aura,
+        options: {
+          darkModeSelector: '.dark',
+        },
+      },
+      ripple: true,
+    },
+  },
+});
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -1,7 +1,34 @@
 <template>
-  <div>
-    <NuxtLink to="/">Home</NuxtLink>
-    <NuxtLink to="/">Default</NuxtLink>
-    <NuxtLink to="/">Lowlight</NuxtLink>
+  <div class="prose">
+    <h1>TipTap Playground</h1>
+    <hr />
+    <div>
+      <h1>Non UI</h1>
+      <NuxtLink class="button" to="/nonui/basic"> Basic </NuxtLink>
+      <NuxtLink class="button" to="/nonui/lowlight"> Lowlight </NuxtLink>
+      <NuxtLink class="button" to="/nonui/image"> Image </NuxtLink>
+    </div>
+    <!-- <div>
+      <h1>With UI</h1>
+      <NuxtLink class="button" to="/basic"> Basic </NuxtLink>
+      <NuxtLink class="button" to="/lowlight"> Lowlight </NuxtLink>
+    </div> -->
   </div>
-</template>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.button {
+  background-color: #4caf50; /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+</style>