c0ckp1t 1.0.18 → 1.0.20

package/components/MarkdownUtils.mjs

@@ -10,8 +10,6 @@ const LOG_HEADER = 'MarkdownUtils.mjs'
 const logger = getLogger(LOG_HEADER)
 logger.debug("[INIT]")
 
-const remotePathPrefix = '/docs/';
-
 // ________________________________________________________________________________
 // EXPORTED UTILITY FUNCTIONS
 // ________________________________________________________________________________
@@ -100,26 +98,34 @@ export function extractSizeFromAlt(alt) {
  * Converts relative paths to absolute paths for documentation
  * 
  * @param {string} inputString - HTML string with img tags
+ * @param {Object} images
  * @returns {string} Modified HTML string
  */
-export function replaceImgLinks(inputString) {
-  return inputString.replace(
-    /img src="([^"]*)" alt="([^"]*)"/g,
-    (match, src, alt) => {
-      logger.debug(`[REGEX_IMG] match=${match} src=${src} alt=${alt}`)
-      const size = extractSizeFromAlt(alt);
-      let sizeAttrs = '';
-      if (size) {
-        sizeAttrs = `width="${size.width}" `;
-        alt = alt.replace(/=(\d+)x(\d+)$/, ''); // Remove size from alt
-      }
-      const adjustedSrc = "" + src.replace(/^\.\//, remotePathPrefix);
-      logger.debug(`[IMG] - ${src} -> ${adjustedSrc}`)
-      return `img src="${adjustedSrc}" class="mk-img" ${sizeAttrs} alt="${alt.trim()}"`
-    }
-  );
+export function replaceImgLinks(inputString, images = {}) {
+    return inputString.replace(
+        /img src="([^"]*)" alt="([^"]*)"/g,
+        (match, src, alt) => {
+            logger.debug(`[REGEX_IMG] match=${match} src=${src} alt=${alt}`)
+            const size = extractSizeFromAlt(alt);
+            let sizeAttrs = '';
+            if (size) {
+                sizeAttrs = `width="${size.width}" `;
+                // sizeAttrs = `width="${size.width}" height="${size.height}"`;
+                alt = alt.replace(/=(\d+)x(\d+)$/, ''); // Remove size from alt
+            }
+            if (match.toLowerCase().includes("http") || match.toLowerCase().includes("class")) {
+                // do nothing
+                return `${match} class="mk-img"`
+            } else {
+                images[src] = null
+                // return `${match} class="mk-img"`
+                return `img :src="images['${src}']" alt="${alt.trim()}" class="mk-img" ${sizeAttrs}`
+            }
+        }
+    );
 }
 
+
 /**
  * Replace Vue template syntax to prevent interpretation
  * Escapes {{ }} so they display literally in markdown

package/components/vue3-ace-editor.vue

@@ -6,6 +6,7 @@
 
 import {ref, reactive, markRaw, onMounted, onBeforeUnmount, watch} from 'vue';
 import {loadAce} from './AceLoader.mjs';
+import {store as storeMain, api as apiMain} from 'GlobalStore'
 
 const root = ref("");
 
@@ -101,7 +102,8 @@ let _editor = undefined
 let _ro = undefined
 let _contentBackup = undefined;
 let _isSettingContent = false;
-
+const currentHeight = ref(props.height);
+const container = ref(null)
 
 watch(() => props.modelValue, (first, second) => {
   value(first)
@@ -139,7 +141,7 @@ onMounted(async () => {
     console.error('Ace editor failed to load:', err)
     return
   }
-  ace.config.set('basePath', '/js_ext/ace-editor');
+  ace.config.set('basePath', `${storeMain.appEndpoint}/js_ext/ace-editor`);
   _editor = markRaw(ace.edit(root.value, {
     mode: 'ace/mode/' + props.lang,
     theme: 'ace/theme/' + props.theme,
@@ -171,8 +173,12 @@ onMounted(async () => {
   local.currentRelativeLineNumbers = false;
 
   value(props.modelValue)
-  _ro = new ResizeObserver(() => _editor.resize());
-  _ro.observe(root.value);
+  _ro = new ResizeObserver(() => {
+    if (container.value) {
+      currentHeight.value = container.value.style.height || container.value.offsetHeight + 'px';
+    }
+    _editor.resize();
+  });
   emit('init', _editor);
 })
 
@@ -246,7 +252,7 @@ function maxLines(val) {
 </script>
 
 <template>
-  <div class="ace-editor" style="display: flex; flex-direction: column;" :style="{ height: props.height }">
+  <div ref="container" class="ace-editor" style="display: flex; flex-direction: column;" :style="{ height: currentHeight }">
     <div class="debug-toolbar" v-if="props.debug">
       <label>
         Theme:
@@ -286,8 +292,7 @@ function maxLines(val) {
 
 .ace-editor {
   resize: vertical;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .debug-toolbar {

package/components/xinput.vue

@@ -21,6 +21,10 @@ const props = defineProps({
     type: String,
     default: 'text'
   },
+  step: {
+    type: Number,
+    default: 1
+  },
   showLabel: {
     type: Boolean,
     default: true
@@ -34,6 +38,10 @@ const props = defineProps({
   inputStyle: {
     type: String,
     default: ""
+  },
+  readonly: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -61,13 +69,13 @@ const typeCheck = computed (() => {
   <span v-if="showLabel" :style="props.styleObject" class=" input-group-text label fw-bold"  > {{ k }} </span>
 
   <input :type="type" aria-label="message" class="form-control"
-         :style="props.inputStyle" v-model.number="message" v-if="type.toUpperCase() === 'NUMBER'">
+         :style="props.inputStyle" v-model.number="message"  :step="step"  :readonly="props.readonly" v-if="type.toUpperCase() === 'NUMBER'">
 
   <input :type="isPasswordVisible ? 'text' : 'password'"  aria-label="message" class="form-control"
-         :style="props.inputStyle" v-model="message" v-else-if="type.toUpperCase() === 'PASSWORD'">
+         :style="props.inputStyle" v-model="message" :readonly="props.readonly" v-else-if="type.toUpperCase() === 'PASSWORD'">
 
   <input :type="type" aria-label="message" class="form-control"
-         :style="props.inputStyle" v-model="message" v-else>
+         :style="props.inputStyle" v-model="message" :readonly="props.readonly" v-else>
 
   <div class="input-group-text text-primary icon-container" @click="isPasswordVisible = !isPasswordVisible" v-if="type.toUpperCase() === 'PASSWORD'">
     <i class="fa-solid fa-eye" v-if="isPasswordVisible"></i>

package/components/xjson.vue

@@ -14,6 +14,10 @@ const props = defineProps({
   expanded: {
     type: Boolean,
     default:  false
+  },
+  copyButton: {
+    type: Boolean,
+    default:  true
   }
 })
 const emit = defineEmits(['select'])
@@ -30,7 +34,9 @@ function sanitize(obj, seen = new WeakSet()) {
   if (typeof obj === 'function') return `[Function: ${obj.name || 'anonymous'}]`
   if (typeof obj === 'symbol') return obj.toString()
   if (typeof obj !== 'object') return obj
-
+  if (obj instanceof Set) {
+    return Array.from(obj).map(item => sanitize(item, seen))
+  }
   // Handle circular references
   if (seen.has(obj)) return '[Circular]'
   seen.add(obj)
@@ -53,6 +59,7 @@ const local = reactive({
     id: id,
     el: null,
     isExpanded: props.expanded,
+    copied: false,
 })
 
 watch(
@@ -75,6 +82,14 @@ function collapseAll() {
     local.el.collapse('**');
 }
 
+function copyToClipboard() {
+    const text = JSON.stringify(sanitize(props.obj), null, 2)
+    navigator.clipboard.writeText(text).then(() => {
+        local.copied = true
+        setTimeout(() => { local.copied = false }, 1500)
+    })
+}
+
 function toggleExpand() {
     if(local.isExpanded) {
         local.isExpanded = false
@@ -110,11 +125,21 @@ onMounted(async () => { init() })
 
 <template>
   <div class="x-json">
-<!--     <button @click="toggleExpand">Toggle Expand</button>-->
+    <button v-if="props.copyButton" class="btn btn-sm btn-outline-secondary copy-btn" @click="copyToClipboard">
+      <i class="fa-solid" :class="local.copied ? 'fa-check' : 'fa-copy'"></i>
+    </button>
     <json-viewer class="p-1" :id="local.id"> </json-viewer>
   </div>
 </template>
 
 <style scoped>
-
+.x-json {
+  position: relative;
+}
+.copy-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+}
 </style>

package/components/xmarkdown.vue

@@ -18,6 +18,7 @@ import {getLogger} from "Logging"
 import {md} from "./Markdown.mjs"
 
 import CodeItem from "../core/sfc/code-item.vue"
+import CodeItem2 from "../core/sfc/code-item2.vue"
 
 import {
   replaceHrefLinks,
@@ -25,7 +26,7 @@ import {
   replaceVueSpecial,
   removeMarkdownHeader,
   slugify,
-  extractSizeFromAlt, decorateTableHTML
+  decorateTableHTML
 } from "./MarkdownUtils.mjs";
 
 const props = defineProps({
@@ -48,91 +49,25 @@ const emit = defineEmits(['href'])
 // ________________________________________________________________________________
 const LOG_HEADER = 'xmarkdown.vue'
 const logger = getLogger(LOG_HEADER)
-logger.debug("init")
+logger.debug("INIT")
 
 // ________________________________________________________________________________
 // LOCAL STATE
 // ________________________________________________________________________________
 const local = reactive({
+  id: LOG_HEADER,
   isLoading: false,
-
   markdownComponent: null,
-
   images: null,
-  text: null,
 })
 
 // ______________________________________________________________________________________
 // RENDING VUE COMPONENT
 // ______________________________________________________________________________________
-// Note: Helper functions have been extracted to MarkdownUtils.mjs for testability
-
-
-// We do not support recursive injection
-async function injectText(text) {
-  logger.debug(`Scanning for markdown injection`)
-
-  // Fetch all
-  const promises = [];
-  text.replace(/{%\s*include\s+(.*?)\s*%}/g, (match, param) => {
-    logger.debug(`[REGEX_INJECT] match=${match} param=${param}`)
-    const promise = props.fetchText(param)
-    promises.push(promise);
-  });
-
-  // Replace all
-  const results = await Promise.all(promises)
-
-  let currentIndex = 0;
-  return text.replace(/{%\s*include\s+(.*?)\s*%}/g, () => results[currentIndex++]);
-}
-
-async function injectTextV2(text) {
-  logger.debug(`[INJECT_TEXT] - Version 2`)
-
-  // Fetch all
-  const promises = [];
-  text.replace(/<div data-ref="([^"]+)".*?><\/div>/g, (match, param) => {
-    logger.debug(`match=${match} param=${param}`)
-
-    const refRegex = /data-(id|lines)="([^"]+)"/g;
-    const refMatch = refRegex.exec(match)
-    if(refMatch !== null) {
-      logger.debug(`type=${refMatch[1]} refId=${refMatch[2]}`)
-      const promise = props.fetchText(param, refMatch[2])
-      promises.push(promise);
-    } else {
-      const promise = props.fetchText(param)
-      promises.push(promise);
-    }
-
-  });
-
-  // Replace all
-  const results = await Promise.all(promises);
-  logger.trace("received injection text:")
-  logger.trace(results)
-  let currentIndex = 0;
-  return text.replace(/<div data-ref="([^"]+)".*?><\/div>/g, () => results[currentIndex++]);
-}
-
-
-async function fetchAllText() {
-  const fetchPromises = Object.keys(local.text).map(relativeURL => {
-    logger.debug(`fetchText - ${relativeURL}`)
-    return props.fetchText(relativeURL).then(text => {
-      logger.debug(text)
-      local.text[relativeURL] = text
-    });
-  });
-  await Promise.all(fetchPromises);
-}
-
 async function fetchAllImages() {
   const fetchPromises = Object.keys(local.images).map(relativeURL => {
     logger.debug(`fetchImage - ${relativeURL}`)
     return props.fetchImage(relativeURL).then(blobUrl => {
-      console.log(blobUrl)
       local.images[relativeURL] = blobUrl
     });
   });
@@ -150,11 +85,16 @@ function renderMarkdown(html) {
     template: html,
     components: {
       CodeItem,
+      CodeItem2,
+    },
+    provide() {
+      return {
+        fetchText: props.fetchText,
+      }
     },
     data: () => {
       return {
         images: local.images,
-        text: local.text
       }
     },
     methods: {
@@ -217,8 +157,6 @@ async function buildComponent(markdownText) {
   logger.trace(markdownText)
 
   let markdown =  removeMarkdownHeader(markdownText)
-  // markdown = await injectText(markdown)
-  markdown = await injectTextV2(markdown)
   logger.trace("markdown after injection")
   logger.trace(markdown)
 
@@ -227,10 +165,8 @@ async function buildComponent(markdownText) {
   html = replaceVueSpecial(html)
   html = replaceHrefLinks(html, props.adjustHrefPath)
   html = decorateTableHTML(html)
-
-  // Initialize images object before replacing img links
   local.images = {}
-  html = replaceImgLinks(html)
+  html = replaceImgLinks(html, local.images)
 
   local.markdownComponent = markRaw(renderMarkdown(html))
 }

package/components/xmd.vue

@@ -0,0 +1,75 @@
+<script setup>
+/*
+  <XMd url="/docs/Introduction.md" />
+
+*/
+
+import {computed, defineProps, reactive, onMounted} from 'vue'
+
+import {store as storeMain, api as apiMain } from 'GlobalStore'
+import {getLogger} from "Logging";
+
+const props = defineProps({
+  url: {type: String, required: true},
+  instanceId: {type: String, required: false, default: "default"}
+})
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'xmd.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const local = reactive({
+  id: LOG_HEADER,
+  isLoading: false,
+// !# C0CKP1T_START local
+  hasError: false,
+  fullCode: "N/A",
+// !# C0CKP1T_END local
+})
+
+
+async function findCode() {
+  const registry = storeMain.r[props.instanceId]
+
+  if (typeof props.url !== 'string' || props.url.length < 3) {
+    local.fullCode = `[INVALID_URL] - problem with props.url\n\n`
+    local.hasError = true
+    return
+  }
+  logger.debug(`[findCode] - ${props.url}`)
+  const resp = await registry.getText( props.url)
+  logger.debug(resp)
+  if (!resp.isOk) {
+    local.fullCode = `[API_ERROR]\n${resp.result}\n\n`
+    local.hasError = true
+    return
+  }
+  // Get the full code
+  local.fullCode = resp.result
+  local.hasError = false
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+onMounted(() => {
+  findCode()
+})
+
+</script>
+
+<template>
+  <div>
+      <XMarkdown :v="local.fullCode" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/xsection.vue

@@ -124,19 +124,22 @@ function titleClick() {
 <template>
   <div class="x-section">
 
-    <div class="row no-select" :class="bgClass">
-      <div class="col" @click="titleClick">
+    <div class="d-flex justify-content-between align-items-center no-select py-1" :class="bgClass">
+
+      <div class="ms-2 col" @click="titleClick">
         <span :class="[fontSizeClass, textClass]" class="title"> {{ props.k }} </span>
       </div>
+
       <div class="col-auto d-flex align-items-center">
         <slot name="header"></slot>
-        <button class="btn is-small ms-2" :class="btnClass" @click="titleClick">
+        <button class="btn btn-sm ms-2 me-2" :class="btnClass" @click="titleClick">
           <span class="icon is-small">
             <i class="fa-solid fa-eye" v-if="local.visible"></i>
             <i class="fa-solid fa-eye-slash" v-else></i>
           </span>
         </button>
       </div>
+
     </div>
 
     <div class="mt-2" v-if="local.visible">