Merge branch 'master' into gh-pages

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 package-lock.json
 pnpm-lock.yaml
+mapclay/

README.md

@@ -0,0 +1,8 @@
+## TODOs
+
+- Editor
+ - Better way to edit table in markdown
+ - `Ctrl-z` to resume last modificatioo
+ - Reduce fontawesome resources
+- Add favicon
+

dist/css/dumbymap.css

@@ -4,8 +4,6 @@
 
 .with-leader-line:not(:has(> *)) {
  display: inline-block;
- left: 0px;
- top: 0px;
 
  padding-right: 15px;
  padding-left: 6px;
@@ -24,7 +22,6 @@
  }
 
  &:hover {
- padding-right: 6px;
  background-image: none;
 
  font-weight: bolder;
@@ -48,7 +45,7 @@
  }
  }
 
- #markdown {
+ .SemanticHtml {
  flex: 1;
  padding: 20px;
  overflow-y: scroll;
@@ -62,20 +59,19 @@
  background-color: white;
  margin-bottom: 3rem;
 
- * {
- width: fit-content;
- }
-
  .draggable {
  display: none;
  }
  }
 
- pre:has(.map-container) {
- display: flex;
- justify-content: flex-start;
+ pre {
  width: 100%;
- background-color: inherit;
+
+ &:has(.map-container) {
+ display: flex;
+ justify-content: flex-start;
+ background-color: inherit;
+ }
  }
 
  .map-container {
@@ -125,7 +121,7 @@
 
 .result-html[data-layout=side] {
  #map,
- #markdown {
+ .SemanticHtml {
  flex: 50%;
  overflow-y: scroll;
  height: 100vh;
@@ -134,13 +130,13 @@
 
 .result-html[data-layout=overlay] {
  #map,
- #markdown {
+ .SemanticHtml {
  position: fixed;
  height: 100%;
  width: 100%;
  }
 
- #markdown {
+ .SemanticHtml {
  font-size: 12px;
  pointer-events: none;
 
@@ -182,7 +178,7 @@
  position: absolute;
  right: 10px;
  bottom: 10px;
- /* FIXME */
+ /* FIXME Hide nav at proper time */
  display: none;
 
  padding: 0.5rem;

dist/css/index.css

@@ -1,34 +1,70 @@
+:root {
+ --content-border: solid lightgray 2px;
+ --content-border-radius: 5px;
+}
+
 body {
  display: flex;
  justify-items: stretch;
+ width: 100%;
 }
 
 .result-html {
- flex: 1;
- height: calc(100vh - 20px);
- border: solid lightgray 2px;
- border-radius: 5px;
+ flex: 0 0 50%;
+ border: var(--content-border);
+ border-radius: var(--content-border-radius);
  margin: 10px;
 }
 
 .editor {
- flex: 1;
+ flex: 0 0 50%;
  max-width: 50vw;
+ height: calc(100vh - 15px);
  margin: 10px;
 }
 
-.TinyMDE {
- height: calc(100vh - 55px);
- padding: 16px;
- overflow-y: scroll;
- border: 2px solid lightgray;
- border-radius: 5px;
+.EasyMDEContainer {
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 20px);
+ box-sizing: border-box;
+
+ .CodeMirror {
+ order: 1;
+ flex-grow: 1;
+ border: var(--content-border);
+ border-radius: var(--content-border-radius);
+ padding-inline: 0;
+
+ span {
+ white-space: pre;
+ }
+ .invalid-input {
+ text-decoration: red wavy underline 1px;
+ }
+ }
+
+ .editor-toolbar {
+ order: 2;
+ margin-top: 0.5rem;
+ border-left: 1px solid #ced4da;
+ border-right: 1px solid #ced4da;
+ border-bottom: 1px solid #ced4da;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
 
- span {
- white-space: pre;
+ .editor-statusbar {
+ order: 3;
  }
- .invalid-input {
- text-decoration: red wavy underline 1px;
+}
+
+/* FIXME For those empty line (no child with cm-comment) */
+.CodeMirror-line:has(.cm-comment) {
+ background: rgba(0,0,0,.05) !important;
+
+ .cm-comment {
+ background: none !important;
  }
 }
 
@@ -41,6 +77,7 @@ body {
  overflow-y: scroll;
  border: 2px solid lightgray;
  border-radius: 0.5rem;
+ z-index: 100;
 
  background: #fff;
 }
@@ -55,6 +92,13 @@ body {
  white-space: nowrap;
  align-items: center;
 
+ &:not(:first-child) {
+ border-top: 1px solid rgb(203 213 225);
+ }
+ &.focus {
+ background: rgb(226 232 240);
+ }
+
  * {
  flex-shrink: 0;
  display: inline-block;
@@ -66,15 +110,10 @@ body {
  font-weight: bold;
  }
  .truncate {
+ flex-shrink: 1;
  text-overflow: ellipsis;
  ::before {
  width: 2rem
  }
  }
 }
-.container__suggestion:not(:first-child) {
- border-top: 1px solid rgb(203 213 225);
-}
-.container__suggestion.focus {
- background: rgb(226 232 240);
-}

dist/css/style.css

@@ -59,7 +59,7 @@ a:hover {
  text-decoration: underline;
 }
 
-pre:has([class^="language-"]) {
+pre:has(code) {
  min-width: 400px;
  display: block;
  padding: 9.5px;

eslint.config.js

@@ -21,7 +21,7 @@ export default [
  node: nodePlugin,
  },
  rules: {
- 'no-unused-vars': ['error', { 'varsIgnorePattern': '^_' }],
+ 'no-unused-vars': ['warn', { 'varsIgnorePattern': '^_' }],
  'import/no-unresolved': 'error',
  'no-console': ["error", { allow: ["info", "warn", "error"] }],
  'eqeqeq': ['error', 'always'],

index.html

@@ -10,21 +10,21 @@
  <link rel="shortcut icon" href="favicon.svg" type="image/svg+xml">
 
  <!-- FIXME -->
- <link rel="stylesheet" href="./dist/css/style.css">
- <link rel="stylesheet" href="./dist/css/dumbymap.css">
- <link rel="stylesheet" type="text/css" href="./dist/css/tiny-mde.min.css" />
+ <link rel="stylesheet" type="text/css" href="./dist/css/style.css">
+ <link rel="stylesheet" type="text/css" href="./dist/css/dumbymap.css">
+ <link rel="stylesheet" type="text/css" href="./dist/css/easymde.min.css">
  <link rel="stylesheet" type="text/css" href="./dist/css/index.css" />
 
  <!-- FIXME -->
+ <script src="./dist/easymde.min.js"></script>
  <script src="./dist/editor.mjs" type="module"></script>
 
 </head>
 
 <body>
  <div class="result-html"></div>
  <div class="editor">
- <div id="tinymde"></div>
- <div id="tinymde_commandbar"></div>
+ <textarea></textarea>
  </div>
 </body>
 

mapclay

@@ -0,0 +1 @@
+/home/pham/git/mapclay