@jvs-milkdown/components 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/components",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "keywords": [
     "milkdown",
     "milkdown plugin"
@@ -50,15 +50,15 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
-    "@jvs-milkdown/core": "^1.2.0",
-    "@jvs-milkdown/ctx": "^1.2.0",
-    "@jvs-milkdown/exception": "^1.2.0",
-    "@jvs-milkdown/plugin-tooltip": "^1.2.0",
-    "@jvs-milkdown/preset-commonmark": "^1.2.0",
-    "@jvs-milkdown/preset-gfm": "^1.2.0",
-    "@jvs-milkdown/prose": "^1.2.0",
-    "@jvs-milkdown/transformer": "^1.2.0",
-    "@jvs-milkdown/utils": "^1.2.0",
+    "@jvs-milkdown/core": "^1.2.1",
+    "@jvs-milkdown/ctx": "^1.2.1",
+    "@jvs-milkdown/exception": "^1.2.1",
+    "@jvs-milkdown/plugin-tooltip": "^1.2.1",
+    "@jvs-milkdown/preset-commonmark": "^1.2.1",
+    "@jvs-milkdown/preset-gfm": "^1.2.1",
+    "@jvs-milkdown/prose": "^1.2.1",
+    "@jvs-milkdown/transformer": "^1.2.1",
+    "@jvs-milkdown/utils": "^1.2.1",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "dompurify": "^3.2.5",

package/src/code-block/config.ts

@@ -26,6 +26,8 @@ export interface CodeBlockConfig {
   previewLabel: string
   previewOnlyByDefault?: boolean
   previewLoading: string | HTMLElement
+  wrapText: string
+  wrapIcon: string
 }
 
 export const defaultConfig: CodeBlockConfig = {
@@ -44,6 +46,8 @@ export const defaultConfig: CodeBlockConfig = {
   previewToggleButton: (previewOnlyMode) => (previewOnlyMode ? 'Edit' : 'Hide'),
   previewLabel: 'Preview',
   previewLoading: 'Loading...',
+  wrapText: 'Wrap',
+  wrapIcon: '',
 }
 
 export const codeBlockConfig = $ctx(defaultConfig, 'codeBlockConfigCtx')

package/src/code-block/view/components/code-block.tsx

@@ -32,6 +32,8 @@ export type CodeBlockProps = {
   getAllLanguages: () => Array<LanguageInfo>
   setLanguage: (language: string) => void
   config: Omit<CodeBlockConfig, 'languages' | 'extensions'>
+  wordWrap: Ref<boolean>
+  toggleWordWrap: () => void
 }
 
 export const CodeBlock = defineComponent<CodeBlockProps>({
@@ -68,6 +70,14 @@ export const CodeBlock = defineComponent<CodeBlockProps>({
       type: Object,
       required: true,
     },
+    wordWrap: {
+      type: Object,
+      required: true,
+    },
+    toggleWordWrap: {
+      type: Function,
+      required: true,
+    },
   },
   setup(props) {
     const previewOnlyByDefault =
@@ -133,6 +143,20 @@ export const CodeBlock = defineComponent<CodeBlockProps>({
                 text={props.text.value}
               />
 
+              <button
+                class={props.wordWrap.value ? 'word-wrap-active' : ''}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  props.toggleWordWrap()
+                }}
+              >
+                {props.config.wrapIcon ? (
+                  <Icon icon={props.config.wrapIcon} />
+                ) : null}
+                {props.config.wrapText || 'Wrap'}
+              </button>
+
               {preview.value ? (
                 <button
                   class="preview-toggle-button"

package/src/code-block/view/node-view.ts

@@ -28,6 +28,7 @@ export class CodeMirrorBlock implements NodeView {
   selected = ref(false)
   language = ref('')
   text = ref('')
+  wordWrap = ref(false)
 
   private updating = false
   private languageName: string = ''
@@ -35,6 +36,7 @@ export class CodeMirrorBlock implements NodeView {
 
   private readonly languageConf: Compartment
   private readonly readOnlyConf: Compartment
+  private readonly lineWrappingConf: Compartment
 
   constructor(
     public node: Node,
@@ -45,12 +47,14 @@ export class CodeMirrorBlock implements NodeView {
   ) {
     this.languageConf = new Compartment()
     this.readOnlyConf = new Compartment()
+    this.lineWrappingConf = new Compartment()
 
     this.cm = new CodeMirror({
       doc: this.node.textContent,
       root: this.view.root,
       extensions: [
         this.readOnlyConf.of(EditorState.readOnly.of(!this.view.editable)),
+        this.lineWrappingConf.of([]),
         drawSelection(),
         cmKeymap.of(this.codeMirrorKeymap()),
         this.languageConf.of([]),
@@ -110,6 +114,8 @@ export class CodeMirrorBlock implements NodeView {
       getReadOnly: () => !this.view.editable,
       setLanguage: this.setLanguage,
       config: this.config,
+      wordWrap: this.wordWrap,
+      toggleWordWrap: this.toggleWordWrap,
     })
   }
 
@@ -276,6 +282,15 @@ export class CodeMirrorBlock implements NodeView {
     )
   }
 
+  toggleWordWrap = () => {
+    this.wordWrap.value = !this.wordWrap.value
+    this.cm.dispatch({
+      effects: this.lineWrappingConf.reconfigure(
+        this.wordWrap.value ? [CodeMirror.lineWrapping] : []
+      ),
+    })
+  }
+
   getAllLanguages = () => {
     return this.loader.getAll()
   }

package/src/image-block/config.ts

@@ -5,6 +5,11 @@ import { withMeta } from '../__internal__/meta'
 export interface ImageBlockConfig {
   imageIcon: string | undefined
   captionIcon: string | undefined
+  cropIcon: string | undefined
+  borderIcon: string | undefined
+  confirmIcon: string | undefined
+  cancelIcon: string | undefined
+  resetCropIcon: string | undefined
   uploadButton: string | undefined
   confirmButton: string | undefined
   uploadPlaceholderText: string
@@ -19,6 +24,11 @@ export interface ImageBlockConfig {
 export const defaultImageBlockConfig: ImageBlockConfig = {
   imageIcon: '🌌',
   captionIcon: '💬',
+  cropIcon: '✂️',
+  borderIcon: '🔲',
+  confirmIcon: '✓',
+  cancelIcon: '✕',
+  resetCropIcon: '↩',
   uploadButton: 'Upload file',
   confirmButton: 'Confirm ⏎',
   uploadPlaceholderText: 'or paste the image link ...',

package/src/image-block/schema.ts

@@ -20,6 +20,14 @@ export const imageBlockSchema = $nodeSchema('image-block', () => {
       caption: { default: '', validate: 'string' },
       ratio: { default: 1, validate: 'number' },
       align: { default: null },
+      cropRatio: { default: 'free', validate: 'string' },
+      cropTop: { default: 0, validate: 'number' },
+      cropLeft: { default: 0, validate: 'number' },
+      cropWidth: { default: 1, validate: 'number' },
+      cropHeight: { default: 1, validate: 'number' },
+      borderWidth: { default: 0, validate: 'number' },
+      borderColor: { default: '#000000', validate: 'string' },
+      borderStyle: { default: 'none', validate: 'string' },
     },
     parseDOM: [
       {
@@ -32,6 +40,14 @@ export const imageBlockSchema = $nodeSchema('image-block', () => {
             caption: dom.getAttribute('caption') || '',
             ratio: Number(dom.getAttribute('ratio') ?? 1),
             align: dom.getAttribute('align') || null,
+            cropRatio: dom.getAttribute('cropRatio') || 'free',
+            cropTop: Number(dom.getAttribute('cropTop') ?? 0),
+            cropLeft: Number(dom.getAttribute('cropLeft') ?? 0),
+            cropWidth: Number(dom.getAttribute('cropWidth') ?? 1),
+            cropHeight: Number(dom.getAttribute('cropHeight') ?? 1),
+            borderWidth: Number(dom.getAttribute('borderWidth') ?? 0),
+            borderColor: dom.getAttribute('borderColor') || '#000000',
+            borderStyle: dom.getAttribute('borderStyle') || 'none',
           }
         },
       },

package/src/image-block/view/components/__tests__/image-viewer.onImageLoadError.spec.tsx

@@ -15,6 +15,11 @@ test('calls onImageLoadError when img fires error', async () => {
     confirmButton: 'Confirm',
     uploadPlaceholderText: 'or paste an image URL',
     onUpload: async () => 'https://example.com/photo.png',
+    cropIcon: '✂️',
+    borderIcon: '🔲',
+    confirmIcon: '✓',
+    cancelIcon: '✕',
+    resetCropIcon: '↩',
   }
 
   // render the ImageViewer component
@@ -23,6 +28,15 @@ test('calls onImageLoadError when img fires error', async () => {
       src: ref('https://example.com/photo.png'),
       caption: ref(''),
       ratio: ref(1),
+      align: ref(null),
+      cropRatio: ref('free'),
+      cropTop: ref(0),
+      cropLeft: ref(0),
+      cropWidth: ref(1),
+      cropHeight: ref(1),
+      borderWidth: ref(0),
+      borderColor: ref('#000000'),
+      borderStyle: ref('none'),
       selected: ref(false),
       readonly: ref(false),
       setAttr: () => {},

package/src/image-block/view/components/image-block.tsx

@@ -13,6 +13,14 @@ type Attrs = {
   caption: string
   ratio: number
   align: string | null
+  cropRatio: string
+  cropTop: number
+  cropLeft: number
+  cropWidth: number
+  cropHeight: number
+  borderWidth: number
+  borderColor: string
+  borderStyle: string
 }
 
 export type MilkdownImageBlockProps = {
@@ -42,6 +50,38 @@ export const MilkdownImageBlock = defineComponent<MilkdownImageBlockProps>({
       type: Object,
       required: true,
     },
+    cropRatio: {
+      type: Object,
+      required: true,
+    },
+    cropTop: {
+      type: Object,
+      required: true,
+    },
+    cropLeft: {
+      type: Object,
+      required: true,
+    },
+    cropWidth: {
+      type: Object,
+      required: true,
+    },
+    cropHeight: {
+      type: Object,
+      required: true,
+    },
+    borderWidth: {
+      type: Object,
+      required: true,
+    },
+    borderColor: {
+      type: Object,
+      required: true,
+    },
+    borderStyle: {
+      type: Object,
+      required: true,
+    },
     selected: {
       type: Object,
       required: true,