feat: update tutorial content for adding GeoLink

* add new module for hoding contents
* also add settings for linkify

1 files changed, 4 insertions, 65 deletions

diff --git a/src/editor.mjs b/src/editor.mjs
index e12073f..58393aa 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -5,6 +5,7 @@ import * as menuItem from './MenuItem'
 import { addAnchorByPoint } from './dumbyUtils.mjs'
 import { shiftByWindow } from './utils.mjs'
 import LeaderLine from 'leader-line'
+import * as tutorial from './tutorial'
 
 /**
  * @typedef {Object} RefLink
@@ -85,72 +86,10 @@ const toggleEditing = () => {
 }
 // }}}
 // Set up EasyMDE {{{
-/** Contents for tutorial **/
-const defaultContent =
-  `<br>
-
-> <big>Hello My Friend! This is DumbyMap!</big>
-
-<br>
-
-\`\`\`map
-use: Leaflet
-height: 120px
-XYZ: https://tile.openstreetmap.jp/styles/osm-bright/512/{z}/{x}/{y}.png
-\`\`\`
-
-
-DumbyMap generates **interactive document with maps** from raw texts.
-
-You can use it to:
-
-1. [Roll a Dice] for a new map
-2. Hover on [GeoLink][example-geolink] to show point in maps.
-3. Add GeoLink by dragging **selected text**
-4. Change contents by [Editor] with [Markdown] text
-5. **Right click** to call context menu, you can:
-    + Change focus between maps
-    + Select a block for browsing
-    + Switch layouts for various use cases
-
-
-If you want know more, take a look at subjects below:
-1. [How to write Markdown text?](https://www.markdownguide.org/basic-syntax/)
-1. <details>
-      <summary>How can I save contents for next use?</summary>
-
-      Since All contents come from raw texts, you can:
-      1. Save current page as bookmark by [hash button](#create-hash "=>.mde-hash")
-      2. Copy texts in editor and save as \`.txt\` file
-      3. Use online service for hosting Markdown, for example: [HackMD](https://hackmd.io)
-
-   </details>
-1. <details>
-      <summary>I want more features in map!</summary>
-
-      DumbyMap use [mapclay](https://github.com/outdoorsafetylab/mapclay) to render maps.
-      1. You can use \`eval\` options to add custom scripts, see [tutorial](https://github.com/outdoorsafetylab/mapclay?tab=readme-ov-file#run-scripts-after-map-is-created) for more details
-      2. You can use custom Renderer indtead of default ones, see [tutorial](https://github.com/outdoorsafetylab/mapclay?tab=readme-ov-file#renderer) for more details
-
-   </details>
-1. [I am an experienced developer, show me what you got!](https://github.com/outdoorsafetylab/dumbymap)
-
-
-<br>
-
-> <big>Have Fun ~<big>
-
- <br>
-
-[Roll a dice]: #Click%20it! "=>.mde-roll"
-[example-geolink]: geo:24,121?xy=121,24&text=Use%20yellow%20link%20point%20to%20map
-[Markdown]: https://www.markdownguide.org/basic-syntax/
-[Editor]: #This%20is%20editor! "=>.editor"`
-
 /** Editor from EasyMDE **/
 const editor = new EasyMDE({
   element: textArea,
-  initialValue: defaultContent,
+  initialValue: tutorial.md,
   autosave: {
     enabled: true,
     uniqueId: 'dumbymap',
@@ -253,7 +192,7 @@ const editor = new EasyMDE({
       text: '\u{2753}',
       title: 'Reset for content for tutorial',
       action: () => {
-        editor.value(defaultContent)
+        editor.value(tutorial.md)
         refLinks = getRefLinks()
         updateDumbyMap()
       },
@@ -305,7 +244,7 @@ const contentFromHash = getContentFromHash(window.location.hash)
 window.location.hash = ''
 
 if (url.searchParams.get('content') === 'tutorial') {
-  editor.value(defaultContent)
+  editor.value(tutorial.md)
 } else if (contentFromHash) {
   // Seems like autosave would overwrite initialValue, set content from hash here
   editor.cleanup()