@podlite/editor-react 0.0.17 → 0.0.19

package/scripts/build.ts

@@ -1,17 +0,0 @@
-import { build } from 'esbuild';
-import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
-
-build({
-  plugins: [pnpPlugin()],
-  bundle: true,
-  entryPoints: ['src/index.tsx'],
-  external: ['react', 'react-dom', 'codemirror', 'react-codemirror2'],
-  minify: true,
-  format: 'cjs',
-  target: 'node12.0',
-  sourcemap: true,
-  outfile: 'lib/index.js',
-}).catch((e) => {
-  console.log('Build not successful', e.message);
-  process.exit(1);
-});

package/scripts/build_esm.ts

@@ -1,17 +0,0 @@
-import { build } from 'esbuild';
-import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
-
-build({
-  plugins: [pnpPlugin()],
-  bundle: true,
-  entryPoints: ['src/index.tsx'],
-  external: ['react', 'react-dom', 'codemirror', 'react-codemirror2'],
-  minify: true,
-  format: 'esm',
-  target: 'node12.0',
-  sourcemap: true,
-  outfile: 'esm/index.js',
-}).catch((e) => {
-  console.log('Build not successful', e.message);
-  process.exit(1);
-});

package/src/Editor.css

@@ -1,356 +0,0 @@
-.EditorApp {
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  .App-logo {
-    height: 40vmin;
-    pointer-events: none;
-  }
-  
-  @media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-      animation: App-logo-spin infinite 20s linear;
-    }
-  }
-  
-  .App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-  }
-  
-  .App-link {
-    color: #61dafb;
-  }
-  .layout {
-    position: absolute;
-    width: 100%;
-    /* height: 100%; */
-  }
-  .Editor {
-    text-align: left;
-    white-space: pre-wrap;
-      word-break: break-word;
-      word-wrap: break-word;
-  }
-  
-  [contenteditable]:focus {
-    outline: 0px solid transparent;
-  }
-  .layout__panel {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    flex: none;
-    overflow: hidden;
-  }
-  
-  .flex--row {
-    flex-direction: row;
-  }
-  .flex {
-    display: flex;
-  }
-  
-  .CodeMirror {
-    height: auto;
-    font-family: inherit;
-  }
-  
-  pre {
-    overflow-x: auto;
-    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
-    word-wrap: break-word;
-  }
-  .title {
-    margin:0em;
-  }
-  .Editorleft {
-    border-right: 1px dotted lightgrey;
-    white-space: pre-wrap;
-    word-break: break-word;
-    word-wrap: break-word;
-    width: 50%;
-    font-size: 15px;
-    text-align: left;
-  }
-  
-  /* .Editorright {
-    text-align: left;
-    word-break: break-word;
-    word-wrap: break-word;
-    margin : 0 1em;
-    font-size: 15px;
-  } */
-  
-  /* Start pod6 */ 
-  body {
-    margin: 0;
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-      monospace;
-  }
-  
-  
-  pre {
-    padding: 9.5px;
-    display: block;
-    word-break: break-all;
-    word-wrap: break-word;
-    background-color:  #f8f8f8;
-    border-radius:  4px;
-  }
-  
-  code {
-    padding: 0;
-    font-size: inherit;
-    color: inherit;
-    white-space: pre-wrap;
-    background-color: transparent;
-    border-radius: 0;
-  }
-  
-  img {
-    max-width: 1024px;
-  }
-  
-  table {
-    word-break: normal;
-    min-width: 70%;
-    max-width: 100%;
-    margin: 1em auto;
-    border-spacing: 0;
-    border-collapse: collapse;
-    text-align: center;
-    margin-top: 2em;
-  }
-  table caption {
-    margin-bottom: 0.8em;
-  }
-  
-  table tbody tr:hover {
-    background-color:  #eee;
-    -webkit-transition: .5s;
-    transition: .5s
-  }
-  
-  tr th {
-    vertical-align: bottom;
-    border-bottom: 2px solid #eee;
-  }
-  
-  td {
-    padding: 8px;
-    border: 1px solid #eee;
-  }
-  
-  .footnote a {
-    text-decoration: none;
-  }
-  .footnotes {
-  border-top-style: solid;
-  border-top-width: 1px;
-  border-top-color: #eee;
-  }
-  
-  img {
-    display: block;
-    margin: 0 auto;
-    max-width: 100%;
-  }
-  
-  .shadow {
-    -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-    -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
-    box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
-  }
-  .box {
-    box-shadow:
-    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
-    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
-    0 12.5px 10px rgba(0, 0, 0, 0.06),
-    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
-    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
-    0 100px 80px rgba(0, 0, 0, 0.12)
-  ;
-    margin: 100px auto;
-    background: white;
-    border-radius: 5px;
-  }
-  
-  .image_block video {
-    max-width: 100%;
-    /* margin: 0 auto; */
-    margin-bottom: 1em;
-  }
-  
-  .image_block video{
-    width: 100%;
-    outline: none;
-    border: none;
-  }
-  
-  /* plugins */
-  .mermaid svg {
-    display: block;
-    margin: auto;
-  }
-
-  .toc {
-    padding: 1rem;
-  }
-  
-  .toc-list {
-    list-style: none;
-    font-size: .8rem;
-  }
-
-  .caption {
-    text-align: center;
-    font-size: 0.9rem;
-}
-  /* End of pod6 */ 
-  
-  
-  .CodeMirror {
-    height: auto;
-    font-family: inherit;
-  }
-  
-  .title {
-    margin:0em;
-  }
-
-  
-  .Editorleft {
-    border-right: 1px dotted lightgrey;
-    white-space: pre-wrap;
-    word-break: break-word;
-    word-wrap: break-word;
-    width: 50%;
-    font-size: 15px;
-    text-align: left;
-    float: left;
-    height: 100%;
-    padding-left: 10px;
-    visibility:visible;
-    opacity: 1;
-     transition: all 0.2s ease-out;
-  }
-  
-  .editorApp,.CodeMirror {
-    height: 100%;
-  }
-  
-  .Editorright {
-    text-align: left;
-    word-break: break-word;
-    word-wrap: break-word;
-    margin-right : 0;
-    height: 100%;
-    font-size: 15px;
-    padding-left: 10px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    background-color: white;
-  }
-
-  .Editorright .error {
-    opacity: 0.5;
-  }
-  /* restore after reset*/
-  .Editorright * {
-    /* all: revert */
-  }
-
-  
-  .Editorright img  {
-        display: block;
-        margin: 0 auto;
-        max-width: 100%;
-  }
-  
-  .content {
-    height: 100%;
-  }
-  
-  .layoutPreview .Editorright {
-    position: absolute;
-    width: 48%;
-    /* z-index: -999999; */
-    float: right;
-    top: 0;
-    right: 0;
-    width: 100%;
-    background-color: white;
-  }
-  .layoutPreview .Editorleft {
-    visibility: hidden;
-    opacity: 0;
-  }
-  
-  .layoutPreview .content {
-    width: 50%;
-    margin: 0 auto;
-    height: 100%;
-    overflow-y: initial;
-  }
-  @keyframes App-logo-spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  
-  /* scrollbars */
-  
-  .CodeMirror-vscrollbar {
-    user-select: none; 
-    outline: none !important; 
-  }
-  
-  ::-webkit-scrollbar-thumb {
-    background-color:  rgba(0, 0, 0, 0.1);
-  }
-  ::-webkit-scrollbar {
-    background-color: (0, 0, 0, 0.05);
-  }
-  ::-webkit-scrollbar-thumb:active {
-    background-color: rgba(0, 0, 0, 0.1); 
-  }
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-    -webkit-border-radius: 100px;
-  }
-  ::-webkit-scrollbar-thumb {
-    -webkit-border-radius: 100px;
-  }
-  ::-webkit-scrollbar-thumb:active {
-    -webkit-border-radius: 100px;
-  }
-  ::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  .CodeMirror-hints {
-    z-index: 1000;
-    border: none;
-  }

package/src/dict.ts

@@ -1,248 +0,0 @@
-// 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 `,
-  },
-
-  {
-    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 
-    =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
-    mouse    | mice
-    horse    | horses
-    elephant | elephants
-`,
-  },
-  {
-    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')
-    Animal | Legs |    Eats
-    =======================
-    Zebra  +   4  + Cookies
-    Human  +   2  +   Pizza
-    Shark  +   0  +    Fish
-`,
-  },
-  {
-    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')
-    sequenceDiagram
-        autonumber
-        Student->>Admin: Can I enrol this semester?
-        loop enrolmentCheck
-            Admin->>Admin: Check previous results
-        end
-        Note right of Admin: Exam results may <br> be delayed
-        Admin-->>Student: Enrolment success
-        Admin->>Professor: Assign student to tutor
-        Professor-->>Admin: Student is assigned
-
-`,
-  },
-  {
-    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')
-    classDiagram
-       Person <|-- Student
-       Person <|-- Professor
-       Person : +String name
-       Person : +String phoneNumber
-       Person : +String emailAddress
-       Person: +purchaseParkingPass()
-       Address "1" <-- "0..1" Person:lives at
-       class Student{
-          +int studentNumber
-          +int averageMark
-          +isEligibleToEnrol()
-          +getSeminarsTaken()
-        }
-        class Professor{
-          +int salary
-        }
-        class Address{
-          +String street
-          +String city
-          +String state
-          +int postalCode
-          +String country
-          -validate()
-          +outputAsLabel()  
-    }
-
-`,
-  },
-  {
-    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')
-head1, head2, head3 
-
-`,
-  },
-  {
-    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

@@ -1,74 +0,0 @@
-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');
-};