@podlite/editor-react 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@podlite/editor-react",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Podlite React component",
   "main": "index.js",
   "types": "lib/index.d.ts",
@@ -28,18 +28,12 @@
     "react-is": "^17.0.2"
   },
   "devDependencies": {
-    "@types/node": "^17.0.7",
-    "@types/react": "^16.x",
     "@yarnpkg/esbuild-plugin-pnp": "^2.0.0",
     "esbuild": "^0.11.12",
-    "prettier": "^2.2.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "ts-node": "^9.1.1",
-    "typescript": "4.5.4"
+    "ts-node": "^9.1.1"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0"
   }
 }

package/src/Editor.css

@@ -193,13 +193,13 @@
     border-radius: 5px;
   }
   
-  .video {
-    max-width: 90%;
+  .image_block video {
+    max-width: 100%;
     /* margin: 0 auto; */
     margin-bottom: 1em;
   }
   
-  div.video video{
+  .image_block video{
     width: 100%;
     outline: none;
     border: none;

package/src/dict.ts

@@ -1,91 +1,98 @@
 // this file contains the dictionary ot the messages used in the podlite editor
+interface Dict {
+  displayText: string;
+  text: string;
+  lang?: 'pod6' | 'md';
+}
+const dict: Dict[] = [
+  {
+    displayText: 'head1',
+    text: `=head1 `,
+  },
+  {
+    displayText: 'head2',
+    text: `=head2 `,
+  },
 
-const dict = [
-    {
-        "displayText": "head1",
-        "text": `=head1 `
-    },
-    {
-        "displayText": "head2",
-        "text": `=head2 `
-    },
-    
-    {
-        "displayText": "head3",
-        "text": `=head3 `
-    },
-    {
-        "displayText": "item1 *",
-        "text": `=item1 `
-    }, 
-    {
-    "displayText": "item1 1.)",
-    "text": `=item1 # `
-},
-{
-    "displayText": "item (1., 2.) 🏷",
-    "text": `=item1 # item 
+  {
+    displayText: 'head3',
+    text: `=head3 `,
+  },
+  {
+    displayText: 'item1 *',
+    text: `=item1 `,
+  },
+  {
+    displayText: 'item1 1.)',
+    text: `=item1 # `,
+  },
+  {
+    displayText: 'item (1., 2.) 🏷',
+    text: `=item1 # item 
     =item2 # item level 2
     =item2 # item level 2
 =item1 # item
     =item2 # item
     =item2 # item level 2
-`},
-{
-    "displayText": "item (*, *) 🏷",
-    "text": `=item1  item 
+`,
+  },
+  {
+    displayText: 'item (*, *) 🏷',
+    text: `=item1  item 
     =item2 item level 2
     =item2 item level 2
 =item1  item
     =item2 item
     =item3  item level 2
-`},
-{
-    "displayText": "Image 🏷",
-    "text": `=Image https://github.com/zag/podlite-desktop/blob/master/dist-assets/linux-icon/256x256.png?raw=true
-`,
-},
-{
-    "displayText": "table simple 🏷",
-    "text":`=for table
+`,
+  },
+  {
+    displayText: 'Image 🏷',
+    text: `=Image https://github.com/zag/podlite-desktop/blob/master/dist-assets/linux-icon/256x256.png?raw=true
+`,
+  },
+  {
+    displayText: 'table simple 🏷',
+    text: `=for table
     mouse    | mice
     horse    | horses
     elephant | elephants
-`
-},
-{
-    "displayText": "table 2x 🏷",
-    "text": `=begin table :caption('Caption of table')
+`,
+  },
+  {
+    displayText: 'table 2x 🏷',
+    text: `=begin table :caption('Caption of table')
 Constants           1
 Variables           10
 Subroutines         33
 Everything else     57
 =end table
-`},
-{
-    "displayText": "table 3x 🏷",
-    "text": `=for table :caption('Caption of table')
+`,
+  },
+  {
+    displayText: 'table 3x 🏷',
+    text: `=for table :caption('Caption of table')
     Animal | Legs |    Eats
     =======================
     Zebra  +   4  + Cookies
     Human  +   2  +   Pizza
     Shark  +   0  +    Fish
-`
-},
-{
-    "displayText": "Diagram simple 🏷",
-    "text": `=begin Diagram  :caption('Caption of diagram')
+`,
+  },
+  {
+    displayText: 'Diagram simple 🏷',
+    text: `=begin Diagram  :caption('Caption of diagram')
     graph LR
             A-->B
             B-->C
             C-->A
             D-->C
 =end Diagram
-`
-},
-{
-    "displayText": "Diagram Sequence 🏷",
-    "text": `=for Diagram :caption('Caption of diagram')
+`,
+  },
+  {
+    displayText: 'Diagram Sequence 🏷',
+    text: `=for Diagram :caption('Caption of diagram')
     sequenceDiagram
         autonumber
         Student->>Admin: Can I enrol this semester?
@@ -97,22 +104,22 @@ Everything else     57
         Admin->>Professor: Assign student to tutor
         Professor-->>Admin: Student is assigned
 
-`
-},
-{
-    "displayText": "Diagram flowchart 🏷",
-    "text": `=for Diagram :caption('Caption of diagram')
+`,
+  },
+  {
+    displayText: 'Diagram flowchart 🏷',
+    text: `=for Diagram :caption('Caption of diagram')
     graph LR
         A[Square Rect] -- Link text --> B((Circle))
         A --> C(Round Rect)
         B --> D{Rhombus}
         C --> D
 
-`
-},
-{
-    "displayText": "Diagram class 🏷",
-    "text": `=for Diagram :caption('Caption of diagram')
+`,
+  },
+  {
+    displayText: 'Diagram class 🏷',
+    text: `=for Diagram :caption('Caption of diagram')
     classDiagram
        Person <|-- Student
        Person <|-- Professor
@@ -140,35 +147,102 @@ Everything else     57
           +outputAsLabel()  
     }
 
-`
-},
-{
-    "displayText": "code block with formatting 🏷",
-    "text": `=begin code :allow<I B Z> 
+`,
+  },
+  {
+    displayText: 'code block with formatting 🏷',
+    text: `=begin code :allow<I B Z> 
 
 =end code
-`
-},
-{
-    "displayText": "Toc head1, head2, head3",
-    "text": `=Toc head1, head2, head3
-`},
-{
-    "displayText": "Toc (with :title) 🏷",
-    "text": `=for Toc :title('Table of contents')
+`,
+  },
+  {
+    displayText: 'Toc head1, head2, head3',
+    text: `=Toc head1, head2, head3
+`,
+  },
+  {
+    displayText: 'Toc (with :title) 🏷',
+    text: `=for Toc :title('Table of contents')
 head1, head2, head3 
 
-`
-},
-{
-    "displayText": "Toc ( Images, Diagrams )  + tables 🏷",
-    "text": `=for Toc :title('List of media')
+`,
+  },
+  {
+    displayText: 'Toc ( Images, Diagrams )  + tables 🏷',
+    text: `=for Toc :title('List of media')
 Image, Diagram
 =for Toc :title('List of tables')
 table
 
-`
-},
+`,
+  },
+
+  {
+    displayText: 'Markdown',
+    text: `=begin Markdown
+
+  {}
+
+=end Markdown
+`,
+  },
+  // Markdown
+
+  {
+    displayText: 'head1',
+    text: `# `,
+    lang: 'md',
+  },
+  {
+    displayText: 'head2',
+    text: `## `,
+    lang: 'md',
+  },
+
+  {
+    displayText: 'head3',
+    text: `### `,
+    lang: 'md',
+  },
+  {
+    displayText: 'item1 *',
+    text: `* `,
+    lang: 'md',
+  },
+  {
+    displayText: 'item1 1.)',
+    text: `1. `,
+    lang: 'md',
+  },
+  {
+    displayText: 'Image 🏷',
+    text: `![Podlite](https://github.com/zag/podlite-desktop/blob/master/dist-assets/linux-icon/256x256.png?raw=true "Podlite logo")
+
+`,
+    lang: 'md',
+  },
+
+  {
+    displayText: 'Table',
+    text: `| Syntax      | Description |
+| ----------- | ----------- |
+| Header      | Title       |
+| Paragraph   | Text        |
 
-]
+`,
+    lang: 'md',
+  },
+  {
+    displayText: 'Diagram simple 🏷',
+    text: `\`\`\`diagram 
+graph LR
+        A-->B
+        B-->C
+        C-->A
+        D-->C
+\`\`\``,
+    lang: 'md',
+  },
+];
 export default dict;

package/src/helpers.ts

@@ -0,0 +1,74 @@
+import { getFromTree, PodliteDocument } from '@podlite/schema';
+import { frozenIds, podlite as podlite_core } from 'podlite';
+export const parse = (str: string): PodliteDocument => {
+  let podlite = podlite_core({ importPlugins: false });
+  let tree = podlite.parse(str);
+  const asAst = podlite.toAstResult(tree);
+  return asAst.interator;
+};
+export const getSuggestionContextForLine = (
+  pod: string,
+  line: number,
+): 'pod6' | 'md' => {
+  const tree = parse(pod);
+  const markdownBlocks = getFromTree(tree, 'Markdown');
+  const isMd =
+    markdownBlocks.findIndex(
+      ({
+        location: {
+          start: { line: lineStart },
+          end: { line: lineEnd },
+        },
+      }) => {
+        return line > lineStart && line < lineEnd;
+      },
+    ) !== -1;
+  if (isMd) return 'md';
+  return 'pod6';
+};
+
+interface Pos {
+  line: number;
+  offset: number;
+}
+interface Selection {
+  start: Pos;
+  end: Pos;
+  text?: string; // return result pod, after remove {}
+}
+export const templateGetSelectionPos = (pod: string): Selection | null => {
+  // if empty selection
+  const EMPTY_SELECTION = new RegExp(/\{\}/);
+  const lineNumEmptySel = pod
+    .split('\n')
+    .findIndex((str) => str.match(EMPTY_SELECTION));
+  if (lineNumEmptySel > -1) {
+    const line = pod.split('\n')[lineNumEmptySel];
+    const matchResult = line.match(EMPTY_SELECTION)!;
+    const start = { line: lineNumEmptySel, offset: matchResult.index! };
+    const end = { line: lineNumEmptySel, offset: matchResult.index! };
+    return { start, end, text: pod.replace(EMPTY_SELECTION, '') };
+  }
+  const SELECTION = new RegExp(/\{[^}]+\}/);
+  const lineNum = pod.split('\n').findIndex((str) => str.match(SELECTION));
+  if (lineNum > -1) {
+    const line = pod.split('\n')[lineNum];
+    const matchResult = line.match(SELECTION)!;
+    const start = { line: lineNum, offset: matchResult.index! };
+    const end = {
+      line: lineNum,
+      offset: matchResult.index! + matchResult[0].length,
+    };
+    return { start, end, text: pod };
+  }
+  return null;
+};
+
+export const addVMargin = (count: number, pod: string) => {
+  const addString = ' '.repeat(count);
+  const [firstLine, ...restLines] = pod.split('\n');
+  return [
+    firstLine,
+    ...[].concat(restLines).map((str) => `${addString}${str}`),
+  ].join('\n');
+};

package/src/index.tsx

@@ -11,6 +11,7 @@ import 'codemirror/mode/gfm/gfm';
 import "codemirror/addon/hint/show-hint";
 import 'codemirror/addon/hint/show-hint.css';
 import './Editor.css';
+import { addVMargin, getSuggestionContextForLine, templateGetSelectionPos } from './helpers'
 
 
 //@ts-ignore
@@ -253,7 +254,7 @@ useEffect(()=>{
             }
         }
     instanceCMLocal.on('change', onChange);
-
+ 
     CMirror.registerHelper('hint', 'dictionaryHint', function(editor) {
         var cur = editor.getCursor();
         var curLine = editor.getLine(cur.line);
@@ -275,8 +276,29 @@ useEffect(()=>{
             }, []);
             return dict.sort((a, b) => a.index - b.index).map(i=>i.item)
         }
+        const langMode = sourceType === 'md' ? 'md' : getSuggestionContextForLine(editor.getValue() ,cur.line+1)
+        const langDict = dictionary.filter( ({lang='pod6'})=>lang === langMode)
+        // apply hint 
+        const resultDict = (!curWord ? langDict : filterDictByRegex(langDict,regex )).map((item)=>{
+            return {...item, hint: function(cm,data, completion){
+                const from = completion.from || data.from
+                const to = completion.to || data.to
+                // add vMargin
+                const text  = addVMargin(from.ch, typeof completion == "string" ? completion : completion.text)
+                const selFromTemplate = templateGetSelectionPos(text)
+                console.log({from ,to , text})
+                if (selFromTemplate) {
+                    const {text,start, end} = selFromTemplate
+                    cm.replaceRange(text, from, to, "complete");
+                    cm.setSelection({line: start.line + from.line, ch: start.offset + from.ch}, {line: end.line + to.line, ch: end.offset + to.ch -1}); 
+                } else {
+                cm.replaceRange(text, from, to, "complete");
+                }
+
+            }}
+        })
         return {
-            list: (!curWord ? dictionary : filterDictByRegex(dictionary,regex )),
+            list: resultDict, 
             from: CMirror.Pos(cur.line, start-1),
             to: CMirror.Pos(cur.line, end)
         }

package/t/editor.test.tsx

@@ -0,0 +1,86 @@
+import { frozenIds, podlite as podlite_core } from 'podlite';
+import { PodliteDocument } from '@podlite/schema';
+import {
+  addVMargin,
+  getSuggestionContextForLine,
+  templateGetSelectionPos,
+} from '../src/helpers';
+
+export const parse = (str: string): PodliteDocument => {
+  let podlite = podlite_core({ importPlugins: false });
+  let tree = podlite.parse(str);
+  const asAst = podlite.toAstResult(tree);
+  return frozenIds()(asAst.interator);
+};
+
+const pod = `
+  =para test
+  =Markdown
+  header1
+=para text
+=begin Markdown
+new text
+=end Markdown
+
+  `;
+it('Check suggestion context: pod6', () => {
+  expect(getSuggestionContextForLine(pod, 1)).toEqual('pod6');
+});
+it('Check suggestion context: md', () => {
+  expect(getSuggestionContextForLine(pod, 4)).toEqual('md');
+});
+it('Check suggestion context: md second block', () => {
+  expect(getSuggestionContextForLine(pod, 7)).toEqual('md');
+});
+
+it('Selection position', () => {
+  const pod = `=begin pod
+{test}
+=end pod
+`;
+  const { text, ...pos } = templateGetSelectionPos(pod) || {};
+  expect(pos).toEqual({
+    start: { line: 1, offset: 0 },
+    end: { line: 1, offset: 6 },
+  });
+});
+
+it('Selection empty position 1', () => {
+  const pod = `=begin pod
+{test
+=end pod
+`;
+  const pos = templateGetSelectionPos(pod);
+  expect(pos).toBeNull;
+});
+
+it('Selection empty position 2', () => {
+  const pod = `=begin pod
+{}test
+=end pod
+`;
+  const { start, end } = templateGetSelectionPos(pod) || {};
+  expect({ start, end }).toEqual({
+    start: { line: 1, offset: 0 },
+    end: { line: 1, offset: 0 },
+  });
+});
+
+it('Test addVMargin 4', () => {
+  const pod = `=begin pod
+test
+=end pod`;
+  const pod2 = `=begin pod
+    test
+    =end pod`;
+  const vpod = addVMargin(4, pod);
+  expect(vpod).toEqual(pod2);
+});
+
+it('Test addVMargin 0', () => {
+  const pod = `=begin pod
+test
+=end pod`;
+  const vpod = addVMargin(0, pod);
+  expect(vpod).toEqual(pod);
+});