@podlite/image 0.0.7 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @podlite/image
 
+## Upcoming
+## 0.0.8
+- add :link attribute support
+- change =Image format ( use text after image link as caption)
+- add :caption support
+- udpdate package
 ## 0.0.7
 - handle empty content
 ## 0.0.6

package/lib/index.js

@@ -1,32 +1,63 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var schema_1 = require("@podlite/schema");
-var Image = {
-    toAst: function () { return function (node) {
+const schema_1 = require("@podlite/schema");
+const config_1 = __importDefault(require("pod6/built/helpers/config"));
+const handlers_1 = require("pod6/built/helpers/handlers");
+const Image1 = {};
+const Image = {
+    toAst: (_, processor) => (node, ctx) => {
         if (typeof node !== "string" && 'type' in node && 'content' in node && node.type === 'block') {
-            var content = node.content[0];
+            const content = node.content[0];
             if (content && typeof content !== "string" && 'location' in node && 'value' in content) {
-                // get link and alt text
-                var data = content.value;
-                var altRegexp = /\s*\[([^\[\]]*)\]\s*/;
-                var altText = (data.match(altRegexp) || [, ''])[1];
-                var link = altText ? data.replace(altRegexp, '') : data;
-                var props = {
-                    src: '',
-                    location: node.location,
-                    margin: node.margin
-                };
-                if (link) {
-                    // clear all \n or spaces
-                    props.src = link.split(/\s+/)[0];
-                }
-                if (altText) {
-                    props.alt = altText;
+                // get src and alt text
+                const lines = content.value.split('\n');
+                const [data, ...caption] = lines;
+                const captionText = caption.join('\n');
+                const altRegexp = /\s*((?<altText>.+)\s+)?(?<src>[^\s]+)/;
+                const { altText, src } = (data.match(altRegexp) || { groups: { altText: undefined, src: undefined } }).groups;
+                const conf = (0, config_1.default)(node, ctx);
+                // make  inline image
+                const imageSrc = conf.exists('src') ? conf.getFirstValue('src') : src;
+                const imageAlt = conf.exists('alt') ? conf.getFirstValue('alt') : altText;
+                const resultContent = [(0, schema_1.mkImage)(imageSrc, imageAlt)];
+                // make caption
+                const captionContent = conf.exists('caption') ? conf.getFirstValue('caption') : captionText;
+                if (captionContent) {
+                    resultContent.push((0, schema_1.mkCaption)(processor(captionContent)));
                 }
-                return schema_1.mkBlockImage(props);
+                return { ...node, content: resultContent, /* content_: node.content */ };
             }
             return node;
         }
-    }; },
+    },
+    toHtml: (0, handlers_1.subUse)({
+        // inside head don't wrap into <p>
+        ':image': (0, handlers_1.setFn)((node, ctx) => {
+            return (writer) => (node) => {
+                const linkTo = ctx.link;
+                if (linkTo) {
+                    writer.writeRaw('<a href="');
+                    writer.write(linkTo);
+                    writer.writeRaw('">');
+                }
+                writer.writeRaw(`<img src="${node.src}" alt="${node.alt}"/>`);
+                if (linkTo) {
+                    writer.writeRaw('</a>');
+                }
+            };
+        }),
+        'caption': (0, handlers_1.wrapContent)('<div class="caption">', '</div>'),
+    }, (0, handlers_1.setFn)((node, ctx) => {
+        const { level } = node;
+        const id = (0, schema_1.getNodeId)(node, ctx);
+        const conf = (0, config_1.default)(node, ctx);
+        if (conf.exists('link')) {
+            ctx.link = conf.getFirstValue('link');
+        }
+        return (0, handlers_1.wrapContent)(`<div class="image_block" ${id ? ` id="${id}"` : ''}>`, `</div>`);
+    })),
 };
 exports.default = Image;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@podlite/image",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "image",
   "main": "index.js",
   "types": "./lib/index.d.ts",
@@ -8,18 +8,18 @@
   "scripts": {
     "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
     "build": "tsc",
-    "test": "jest"
+    "test": "yarn g:jest  --passWithNoTests",
+    "watch:update": " yarn build && yarn test",
+    "watch": "yarn g:watch"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "main": "index.js"
   },
   "dependencies": {
-    "@podlite/schema": "^0.0.6"
+    "@podlite/schema": "^0.0.7"
   },
   "devDependencies": {
-    "@podlite/schema": "*",
-    "podlite": "^0.0.11",
-    "typescript": "4.2.3"
-  },
-  "gitHead": "eaae7ef7bee8588d8dbe3abbff3a3a03e43b849e"
-}
+    "podlite": "0.0.12"
+  }
+}

package/src/index.ts

@@ -1,36 +1,65 @@
 
-import {mkBlockImage, mkBlockImageParams, Plugin} from '@podlite/schema'
-
+import {getNodeId, mkCaption, mkImage, Plugin, PodNode} from '@podlite/schema'
+import makeAttrs from 'pod6/built/helpers/config'
+import { setFn, subUse, wrapContent } from 'pod6/built/helpers/handlers'
+const Image1:Plugin = {}
 const Image:Plugin = {
-    toAst: () => (node) => {
+    toAst: (_, processor) => (node, ctx) => {
         if (typeof node !== "string" && 'type' in node && 'content' in node && node.type === 'block') {
             
             const content = node.content[0]
             if (content && typeof content !== "string" && 'location' in node && 'value' in content) {
-                // get link and alt text
-                const data = content.value
-                const altRegexp =  /\s*\[([^\[\]]*)\]\s*/
-                const altText = (data.match(altRegexp) || [,''])[1];
-                const link = altText ? data.replace(altRegexp, '') : data
-                const props:mkBlockImageParams = {
-                    src:'',
-                    location:node.location,
-                    margin:node.margin
-                }
-                if (link) {
-                    // clear all \n or spaces
-                    props.src = link.split(/\s+/)[0]
-                }
-                if (altText) {
-                    props.alt = altText
+                // get src and alt text
+                const lines = content.value.split('\n')
+                const [data, ...caption ] = lines
+                const captionText = caption.join('\n')
+                const altRegexp = /\s*((?<altText>.+)\s+)?(?<src>[^\s]+)/
+                const { altText, src } = (data.match(altRegexp) || {groups:{ altText: undefined, src: undefined }} ).groups 
+                const conf = makeAttrs(node, ctx)
+                // make  inline image
+                const imageSrc = conf.exists('src') ? conf.getFirstValue('src') : src
+                const imageAlt = conf.exists('alt') ? conf.getFirstValue('alt') : altText
+                const resultContent: Array<PodNode>= [ mkImage(imageSrc, imageAlt)]
+                // make caption
+                const captionContent = conf.exists('caption') ? conf.getFirstValue('caption') : captionText
+                if ( captionContent ) {
+                    resultContent.push( mkCaption(processor(captionContent)) )
                 }
-                return mkBlockImage(props)
+
+                return { ...node, content:resultContent ,/* content_: node.content */}
             }
             return node
         }
 
      },
-   
+   toHtml: subUse({
+            // inside head don't wrap into <p>
+                ':image' : setFn(( node, ctx ) => {
+                        return (writer) => (node)=>{
+                            const linkTo = ctx.link
+                            if (linkTo) { 
+                                writer.writeRaw('<a href="')
+                                writer.write(linkTo)
+                                writer.writeRaw('">')
+                            }
+                            writer.writeRaw(`<img src="${node.src}" alt="${node.alt}"/>`)
+                            if (linkTo) { 
+                                writer.writeRaw('</a>')
+                            }
+                        }
+                    }),
+                'caption': wrapContent('<div class="caption">', '</div>'),
+            },
+            setFn(( node, ctx ) => {
+                const {level} = node
+                const id = getNodeId(node, ctx)
+                const conf = makeAttrs(node, ctx)
+                if ( conf.exists('link') ) {
+                    ctx.link = conf.getFirstValue('link')
+                }
+                return wrapContent( `<div class="image_block" ${ id ? ` id="${id}"` : ''}>`, `</div>` )
+            })
+     ),
 }
 export default Image
 

package/t/Image.test.ts

@@ -1,62 +1,75 @@
 // import  * as Image  from '../src';
-import { AstTree, isValidateError, PodliteDocument, validateAst} from '@podlite/schema'
-import { podlite as podlite_core } from 'podlite'
-import Image from '../src/index'
+import {
+  AstTree,
+  getFromTree,
+  isValidateError,
+  PodliteDocument,
+  validateAst,
+  validateAstTree,
+  validatePodliteAst,
+} from "@podlite/schema";
+import { frozenIds, podlite as podlite_core } from "podlite";
+import Image from "../src/index";
 
 const parse = (str: string): PodliteDocument => {
-    let podlite = podlite_core({ importPlugins: false }).use({ Image })
-    let tree = podlite.parse(str)
-    const asAst = podlite.toAst(tree)
-    return asAst
-}
+  let podlite = podlite_core({ importPlugins: false }).use({ Image });
+  let tree = podlite.parse(str);
+  const asAst = podlite.toAst(tree);
+  return asAst;
+};
 
 const parseToHtml = (str: string): string => {
-    let podlite = podlite_core({ importPlugins: false }).use({ Image })
-    let tree = podlite.parse(str)
-    const asAst = podlite.toAst(tree)
-    return podlite.toHtml(asAst).toString()
-}
+  let podlite = podlite_core({ importPlugins: false }).use({ Image });
+  let tree = podlite.parse(str);
+  const asAst = podlite.toAst(tree);
+  return podlite.toHtml(frozenIds()(asAst)).toString();
+};
 
 const cleanHTML = (html: string) => {
-    return html.replace(/\n+/g, '')
-}
+  return html.replace(/\n+/g, "");
+};
 
-const FIXTURES = [
-    [`=begin pod
-=Image https://example.com/test.png
-=end pod`,
-        "<img src=\"https://example.com/test.png\"/>",
-    '=Image url'
-    ],
+it("AST validate", () => {
+  const p = parse(`=Image test.png
+    short caption`);
+  const Image = getFromTree(p, "Image")[0];
+  const r = validateAstTree([Image]);
+  expect(r).toEqual([]);
+});
+it("=Image minimal", () => {
+  const pod = `=for Image 
+test`;
+  const html = parseToHtml(pod);
+  expect(html).toMatchInlineSnapshot(`
+    <div class="image_block"
+         id="id"
+    >
+      <img src="test"
+           alt="undefined"
+      >
+    </div>
+  `);
+});
 
-    [`=Image test`,
-        "<img src=\"test\"/>",
-    '=Image url'
-    ],
-
-    [`=Image [alt text] test`,
-        "<img src=\"test\" alt=\"alt text\"/>",
-    '=Image [alt] url'
-    ],
-
-    [`=for Image 
-test`,
-        "<img src=\"test\"/>"
-    ],
-
-]
-
-describe("ast validator", () => {
-    FIXTURES.map((i, idx) => test(`${i[2] || idx}`, () => {
-        const pod = i[0]
-        const result = parse(pod)
-        const r = validateAst(result, 'PodliteDocument')
-        const vres = isValidateError(r, result);
-        expect(r).toEqual([]);
-    }
-    ))
-})
-
-describe("run parser tests", () => {
-    FIXTURES.map((i, idx) => test(`${i[2] || idx}`, () => expect(cleanHTML(parseToHtml(i[0]))).toEqual(cleanHTML(i[1]))))
-})
+it("Image", () => {
+  const pod = `=for Image :id<111> :alt('testAlt') :caption('testCaption') :link('testLink')
+test.png
+`;
+  const html = parseToHtml(pod);
+  expect(html).toMatchInlineSnapshot(`
+    <div class="image_block"
+         id="111"
+    >
+      <a href="testLink">
+        <img src="test.png"
+             alt="testAlt"
+        >
+      </a>
+      <div class="caption">
+        <p>
+          testCaption
+        </p>
+      </div>
+    </div>
+  `);
+});

package/tsconfig.json

@@ -3,11 +3,15 @@
   "include": ["src/**/*"],
   "compilerOptions": {
     "outDir": "./lib",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "baseUrl": "."
   },
   "references": [
     {
       "path": "../core"
+    },
+    {
+      "path": "../podlite-schema"
     }
   ]
 }