pimelon-ui 0.1.111 → 0.1.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.111",
+  "version": "0.1.113",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.16",
+    "@tiptap/extension-code-block-lowlight": "^2.11.5",
     "@tiptap/extension-color": "^2.0.3",
     "@tiptap/extension-highlight": "^2.0.3",
     "@tiptap/extension-image": "^2.0.3",
@@ -52,6 +53,7 @@
     "feather-icons": "^4.28.0",
     "husky": "^9.1.7",
     "idb-keyval": "^6.2.0",
+    "lowlight": "^3.3.0",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
     "radix-vue": "^1.5.3",

package/src/components/TextEditor/CodeBlockComponent.vue

@@ -0,0 +1,168 @@
+<template>
+  <node-view-wrapper>
+    <div class="code-block-container">
+      <select
+        class="language-selector form-select"
+        contenteditable="false"
+        v-model="selectedLanguage"
+      >
+        <option :value="null">auto</option>
+        <option disabled>—</option>
+        <option
+          v-for="(language, index) in languages"
+          :value="language.value"
+          :key="language.value"
+        >
+          {{ language.label }}
+        </option>
+      </select>
+      <pre><code><node-view-content /></code></pre>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    NodeViewWrapper,
+    NodeViewContent,
+  },
+  props: nodeViewProps,
+  computed: {
+    selectedLanguage: {
+      get() {
+        return this.node.attrs.language
+      },
+      set(language) {
+        this.updateAttributes({ language })
+      },
+    },
+    languages() {
+      let supportedLanguages = this.extension.options.lowlight.listLanguages()
+      return supportedLanguages
+        .map((language) => {
+          return {
+            label: language,
+            value: language,
+          }
+        })
+        .concat([{ label: 'html', value: 'xml' }])
+        .sort((a, b) => a.label.localeCompare(b.label))
+    },
+  },
+}
+</script>
+
+<style>
+/* CodeBlock styles */
+.code-block {
+  position: relative;
+}
+
+.code-block-container {
+  position: relative;
+}
+
+.language-selector {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0;
+  z-index: 10;
+  transition-property: opacity;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  pointer-events: none;
+}
+
+.code-block-container:hover .language-selector {
+  opacity: 1;
+  transition-delay: 0s;
+  pointer-events: auto;
+}
+
+.language-selector:focus-within {
+  opacity: 1;
+  transition-delay: 0s;
+  pointer-events: auto;
+}
+
+/* When mouse leaves the code block, delay the hiding */
+.code-block-container:not(:hover) .language-selector:not(:focus-within) {
+  transition-delay: 1.5s;
+}
+
+.ProseMirror pre {
+  background: #0d0d0d;
+  color: #fff;
+  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono',
+    'Droid Sans Mono', 'Consolas', 'Courier New', monospace;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  caret-color: #fff;
+}
+
+.ProseMirror pre code {
+  color: inherit;
+  padding: 0;
+  background: none;
+  font-size: 12px;
+}
+
+.ProseMirror pre .hljs-comment,
+.ProseMirror pre .hljs-quote {
+  color: #999;
+}
+
+.ProseMirror pre .hljs-variable,
+.ProseMirror pre .hljs-template-variable,
+.ProseMirror pre .hljs-attribute,
+.ProseMirror pre .hljs-tag,
+.ProseMirror pre .hljs-name,
+.ProseMirror pre .hljs-regexp,
+.ProseMirror pre .hljs-link,
+.ProseMirror pre .hljs-selector-id,
+.ProseMirror pre .hljs-selector-class {
+  color: #f2777a;
+}
+
+.ProseMirror pre .hljs-number,
+.ProseMirror pre .hljs-meta,
+.ProseMirror pre .hljs-built_in,
+.ProseMirror pre .hljs-builtin-name,
+.ProseMirror pre .hljs-literal,
+.ProseMirror pre .hljs-type,
+.ProseMirror pre .hljs-params {
+  color: #f99157;
+}
+
+.ProseMirror pre .hljs-string,
+.ProseMirror pre .hljs-symbol,
+.ProseMirror pre .hljs-bullet {
+  color: #99cc99;
+}
+
+.ProseMirror pre .hljs-title,
+.ProseMirror pre .hljs-section {
+  color: #ffcc66;
+}
+
+.ProseMirror pre .hljs-keyword,
+.ProseMirror pre .hljs-selector-tag {
+  color: #6196cc;
+}
+
+.ProseMirror pre .hljs-emphasis {
+  font-style: italic;
+}
+
+.ProseMirror pre .hljs-strong {
+  font-weight: 700;
+}
+</style>

package/src/components/TextEditor/TextEditor.story.vue

@@ -5,7 +5,24 @@ import TextEditor from './TextEditor.vue'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
 import { Button } from '../Button'
 
-const value = ref('')
+const value = ref(`
+<div>
+  <h2>Heading 2</h2>
+  <p>
+    This is a paragraph with <strong>bold</strong> and <em>italic</em> text.
+  </p>
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+  </ul>
+  <p>
+    <a href="https://devel.monakerp.com">Melon</a>
+  </p>
+  <pre><code class="language-javascript">import { Button } from 'pimelon-ui'
+const value = ref(true);</code>
+  </pre>
+</div>
+`)
 const customValue = ref('')
 const customButtons = [
   'Paragraph',

package/src/components/TextEditor/TextEditor.vue

@@ -17,7 +17,7 @@
 <script>
 import { normalizeClass } from 'vue'
 import { computed } from '@vue/reactivity'
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import TextAlign from '@tiptap/extension-text-align'
@@ -32,6 +32,9 @@ import Typography from '@tiptap/extension-typography'
 import TextStyle from '@tiptap/extension-text-style'
 import Highlight from '@tiptap/extension-highlight'
 import { Color } from '@tiptap/extension-color'
+import { common, createLowlight } from 'lowlight'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import CodeBlockComponent from './CodeBlockComponent.vue'
 import configureMention from './mention'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
 import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
@@ -40,6 +43,8 @@ import EmojiExtension from './emoji-extension'
 import { detectMarkdown, markdownToHTML } from '../../utils/markdown'
 import { DOMParser } from 'prosemirror-model'
 
+const lowlight = createLowlight(common)
+
 export default {
   name: 'TextEditor',
   inheritAttrs: false,
@@ -136,6 +141,7 @@ export default {
       extensions: [
         StarterKit.configure({
           ...this.starterkitOptions,
+          codeBlock: false,
         }),
         Table.configure({
           resizable: true,
@@ -150,6 +156,11 @@ export default {
         TextStyle,
         Color,
         Highlight.configure({ multicolor: true }),
+        CodeBlockLowlight.extend({
+          addNodeView() {
+            return VueNodeViewRenderer(CodeBlockComponent)
+          },
+        }).configure({ lowlight }),
         Image,
         Video,
         Link.configure({

package/src/utils/fileUploadHandler.ts

@@ -8,6 +8,9 @@ interface UploadOptions {
   method?: string
   type?: string
   upload_endpoint?: string
+  optimize?: boolean
+  max_width?: number
+  max_height?: number
 }
 
 type EventListenerOption = 'start' | 'progress' | 'finish' | 'error'
@@ -129,6 +132,16 @@ class FileUploadHandler {
         form_data.append('type', options.type)
       }
 
+      if (options.optimize) {
+        form_data.append('optimize', '1')
+        if (options.max_width) {
+            form_data.append('max_width', options.max_width.toString())
+        }
+        if (options.max_height) {
+            form_data.append('max_height', options.max_height.toString())
+        }
+      }
+
       xhr.send(form_data)
     })
   }