@adminforth/markdown 1.0.0

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,44 @@
+#!/bin/sh
+
+set -x
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+
+if [ "$CI_STEP_STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+BUILD_LOG=$(echo $BUILD_LOG | sed 's/"/\\"/g')
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl -sS -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK" 2>&1

package/.woodpecker/release.yml

@@ -0,0 +1,44 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+    secrets:
+      - VAULT_TOKEN
+
+  release:
+    image: node:20
+    when:
+      - event: push
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    commands:
+      - apt update && apt install -y rsync
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - npm clean-install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+      - npx semantic-release
+
+  slack-on-failure:
+    when:
+      - event: push
+        status: [failure, success]
+      - event: push
+    image: curlimages/curl
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh
+

package/build.log

@@ -0,0 +1,14 @@
+
+> @adminforth/markdown@1.0.0 build
+> tsc && rsync -av --exclude 'node_modules' custom dist/
+
+sending incremental file list
+custom/
+custom/MarkdownEditor.vue
+custom/MarkdownRenderer.vue
+custom/package-lock.json
+custom/package.json
+custom/tsconfig.json
+
+sent 169,522 bytes  received 115 bytes  339,274.00 bytes/sec
+total size is 169,062  speedup is 1.00

package/custom/MarkdownEditor.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="mb-2"></div>
+    <div ref="editorContainer" id="editor" :class="[
+    'text-sm rounded-lg block w-full transition-all box-border',
+    isFocused
+      ? 'ring-1 ring-lightPrimary border ring-lightPrimary border-lightPrimary dark:ring-darkPrimary dark:border-darkPrimary bg-white dark:bg-gray-700 text-gray-900 dark:text-white'
+      : 'bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white',
+  ]"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+
+import { Editor, rootCtx, defaultValueCtx } from '@milkdown/core';
+import { gfm } from '@milkdown/kit/preset/gfm';
+import { commonmark } from '@milkdown/preset-commonmark';
+import { listener, listenerCtx } from '@milkdown/plugin-listener';
+import { Crepe } from '@milkdown/crepe';
+
+import '@milkdown/crepe/theme/common/style.css';
+import '@milkdown/crepe/theme/frame-dark.css';
+
+const props = defineProps<{ column: any; record: any }>();
+const emit = defineEmits(['update:value']);
+const editorContainer = ref<HTMLElement | null>(null);
+const content = ref(props.record[props.column.name] || '');
+
+const isFocused = ref(false);
+
+let milkdownInstance: Editor | null = null;
+let crepeInstance: Crepe | null = null;
+
+onMounted(async () => {
+  if (!editorContainer.value) return;
+  try {
+    // Milkdown
+    // console.log('props.cole', props.column)
+    // if (props.column.components.edit.meta.pluginType === 'milkdown' || props.column.components.create.meta.pluginType === 'milkdown') {
+    //   milkdownInstance = await Editor.make()
+    //     .config((ctx) => {
+    //       ctx.set(rootCtx, editorContainer.value!);
+    //       ctx.set(defaultValueCtx, content.value);
+    //       ctx.get(listenerCtx).markdownUpdated((_ctx, markdown) => {
+    //         content.value = markdown;
+    //         emit('update:value', markdown);
+    //       });
+    //       ctx.get(listenerCtx).focus(() => {
+    //         isFocused.value = true;
+    //       });
+
+    //       ctx.get(listenerCtx).blur(() => {
+    //         isFocused.value = false;
+    //       });
+    //     })
+    //     .use(commonmark)
+    //     .use(gfm)
+    //     .use(listener)
+    //     .create();
+
+    //   console.log('Milkdown editor created');
+    // }
+
+    // Crepe
+    if (props.column.components.edit.meta.pluginType === 'crepe' || props.column.components.create.meta.pluginType === 'crepe') {
+      crepeInstance = await new Crepe({
+      root: editorContainer.value,  
+      defaultValue: content.value,
+    });
+
+    crepeInstance.on((listener) => {
+      listener.markdownUpdated(() => {
+        const markdownContent = crepeInstance.getMarkdown();
+        emit('update:value', markdownContent);
+      });
+
+    listener.focus(() => {
+      isFocused.value = true;
+    });
+    listener.blur(() => {
+      isFocused.value = false;
+    });
+  });
+
+await crepeInstance.create();
+console.log('Crepe editor created');
+    }
+  } catch (error) {
+    console.error('Failed to initialize editor:', error);
+  }
+});
+
+onBeforeUnmount(() => {
+  milkdownInstance?.destroy();
+  crepeInstance?.destroy();
+  console.log('Editor destroyed');
+});
+</script>
+
+<style>
+#editor [contenteditable="true"] {
+  @apply bg-transparent outline-none border-none shadow-none transition-none min-h-10 p-2 bg-gray-700 dark:placeholder-gray-400;
+}
+
+#editor [contenteditable="true"].is-focused {
+  @apply ring-1 ring-lightPrimary border ring-lightPrimary border-lightPrimary bg-white text-gray-900 dark:ring-darkPrimary dark:border-darkPrimary dark:bg-gray-700 dark:text-white;
+}
+
+#editor [contenteditable="true"]:not(.is-focused) {
+  @apply bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white;
+}
+
+.milkdown milkdown-slash-menu {
+  @apply bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white z-10;
+}
+
+.milkdown milkdown-slash-menu .menu-groups .menu-group li.hover {
+  @apply bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white;
+}
+
+.milkdown milkdown-slash-menu .tab-group ul li.selected {
+  @apply bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white;
+}
+
+.milkdown-slash-menu .tab-group ul li.selected:hover {
+  @apply bg-gray-50 border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white;
+}
+
+.milkdown milkdown-code-block {
+  @apply bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white;
+}
+
+.milkdown milkdown-code-block .cm-gutters {
+  @apply bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white;
+}
+
+
+</style>

package/custom/MarkdownRenderer.vue

@@ -0,0 +1,110 @@
+<template>
+    <div v-html="purifiedHtml" class="mdwn"></div>
+  </template>
+  
+  <script setup lang="ts">
+  import { computed } from 'vue';
+  import { marked } from "marked";
+  import DOMPurify from "dompurify";
+  
+  const props = defineProps<{ column: any; record: any }>();
+  
+  const purifiedHtml = computed(() => {
+
+    if (!props.record[props.column.name]) return '-';
+    const html = marked(String(props.record[props.column.name]));
+    if (html instanceof Promise) {
+      console.error("Async rendering is not supported in this setup.");
+      return '';
+    }
+    return DOMPurify.sanitize(html);
+  });
+  </script>
+  
+  <style lang="scss">
+
+    .mdwn h1 {
+      @apply text-2xl font-bold mt-2 mb-2;
+    }
+
+    .mdwn h2 {
+      @apply text-xl font-bold mt-2 mb-2;
+    }
+
+    .mdwn h3 {
+      @apply text-lg font-bold mt-2 mb-2;
+    }
+
+    .mdwn h4 {
+      @apply text-base font-bold mt-2 mb-2;
+    }
+
+    .mdwn h5 {
+      @apply text-sm font-bold mt-2 mb-2;
+    }
+
+    .mdwn h6 {
+      @apply text-xs font-bold mt-2 mb-2;
+    }
+
+    .mdwn p {
+      @apply mb-2 leading-relaxed;
+    }
+
+    .mdwn ul {
+      @apply list-disc pl-5 mb-2;
+    }
+
+    .mdwn ol {
+      @apply list-decimal pl-5 mb-2;
+    }
+
+    .mdwn li {
+      @apply mb-1;
+    }
+
+    .mdwn blockquote {
+      @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 mb-2;
+    }
+
+    .mdwn code {
+      @apply bg-gray-100 dark:bg-gray-800 text-red-600 dark:text-red-400 font-mono px-1 py-0.5 rounded;
+    }
+
+    .mdwn pre {
+      @apply bg-gray-100 dark:bg-gray-900 text-sm font-mono p-4 rounded overflow-x-auto mb-2;
+    }
+    .mdwn pre code {
+      @apply bg-transparent p-0 text-inherit;
+    }
+
+    .mdwn table {
+      @apply w-full border-collapse text-left text-sm mb-2;
+    }
+
+    .mdwn thead {
+      @apply bg-gray-100 dark:bg-gray-700;
+    }
+
+    .mdwn th,
+    .mdwn td {
+      @apply border border-gray-300 dark:border-gray-700 px-4 py-2;
+    }
+
+    .mdwn th {
+      @apply font-semibold;
+    }
+
+    .mdwn hr {
+      @apply border-t border-gray-300 dark:border-gray-700 my-6;
+    }
+
+    .mdwn img {
+      @apply max-w-full h-auto rounded;
+    }
+
+    .mdwn a {
+      @apply text-blue-600 hover:underline dark:text-blue-400;
+    }
+
+  </style>