doxa/doxa-notes/wiki/editor_en/index.html

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        
        <link rel="shortcut icon" href="../img/favicon.ico">
        <title>DOXA editor - DOXA Notes 🦅</title>
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/fontawesome.min.css" rel="stylesheet">
        <link href="../css/brands.min.css" rel="stylesheet">
        <link href="../css/solid.min.css" rel="stylesheet">
        <link href="../css/v4-font-face.min.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">
        <link id="hljs-light" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css" >
        <link id="hljs-dark" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css" disabled>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
        <script>hljs.highlightAll();</script> 
    </head>

    <body>
        <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
            <div class="container">
                <a class="navbar-brand" href="..">DOXA Notes 🦅</a>
                <!-- Expander button -->
                <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Expanded navigation -->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                        <!-- Main navigation -->
                        <ul class="nav navbar-nav">
                            <li class="nav-item">
                                <a href=".." class="nav-link">Home</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"  aria-expanded="false">Wiki - Česky</a>
                                <ul class="dropdown-menu">
                                    
<li>
    <a href="../install/" class="dropdown-item">Instalace</a>
</li>
                                    
<li>
    <a href="../editor/" class="dropdown-item">DOXA editor</a>
</li>
                                </ul>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle active" aria-current="page" role="button" data-bs-toggle="dropdown"  aria-expanded="false">Wiki - English</a>
                                <ul class="dropdown-menu">
                                    
<li>
    <a href="../install_en/" class="dropdown-item">Install</a>
</li>
                                    
<li>
    <a href="./" class="dropdown-item active" aria-current="page">DOXA editor</a>
</li>
                                </ul>
                            </li>
                        </ul>

                    <ul class="nav navbar-nav ms-md-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#mkdocs_search_modal">
                                <i class="fa fa-search"></i> Search
                            </a>
                        </li>
                            <li class="nav-item">
                                <a rel="prev" href="../install_en/" class="nav-link">
                                    <i class="fa fa-arrow-left"></i> Previous
                                </a>
                            </li>
                            <li class="nav-item">
                                <a rel="next" class="nav-link disabled">
                                    Next <i class="fa fa-arrow-right"></i>
                                </a>
                            </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                    <div class="col-md-3"><div class="navbar-expand-md bs-sidebar hidden-print affix" role="complementary">
    <div class="navbar-header">
        <button type="button" class="navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#toc-collapse" title="Table of Contents">
            <span class="fa fa-angle-down"></span>
        </button>
    </div>

    
    <div id="toc-collapse" class="navbar-collapse collapse card bg-body-tertiary">
        <ul class="nav flex-column">
            
            <li class="nav-item" data-bs-level="2"><a href="#create-a-new-note" class="nav-link">Create a new note</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#slash-command-quick-command-help" class="nav-link">Slash Command - Quick command help</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#tags" class="nav-link">Tags</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#editing-and-deleting" class="nav-link">Editing and deleting</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#moving-the-order-of-notes" class="nav-link">Moving the order of notes</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#switching-the-appearance" class="nav-link">Switching the appearance</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#autosave" class="nav-link">Autosave</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#manual-saving" class="nav-link">Manual saving</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#import-export" class="nav-link">Import / Export</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#export-to-markdown" class="nav-link">Export to Markdown</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#search-filtration" class="nav-link">Search (Filtration)</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#folders" class="nav-link">Folders</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#security-and-backups" class="nav-link">Security and backups</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#common-problems" class="nav-link">Common problems</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            
            <li class="nav-item" data-bs-level="2"><a href="#markdown" class="nav-link">Markdown</a>
              <ul class="nav flex-column">
              </ul>
            </li>
        </ul>
    </div>
</div></div>
                    <div class="col-md-9" role="main">

<h2 id="create-a-new-note">Create a new note</h2>
<ul>
<li>Click the ➕ New note button and enter a name.</li>
<li>The item will appear in the list. Click to load the name and content into the editor above.</li>
<li>Edit the content and click Save now.</li>
</ul>
<h2 id="slash-command-quick-command-help">Slash Command - Quick command help</h2>
<ol>
<li>Type / in the editor → a menu with commands will appear</li>
<li>Filtering The menu is filtered by the next text (e.g. <code>/da</code> will display <code>/date</code>)</li>
<li>Navigation:
↓↑ = Move up/down in the menu
Enter/Tab = Select the current command
Escape = Close the menu</li>
<li>Click on the command Insert at the cursor position</li>
<li>Automatically close when clicking outside</li>
</ol>
<p>Available slash commands:</p>
<pre><code>/date - Insert today's date (📅)
/time - Insert time (🕐)
/code - Inline code (💻)
/codeblock - Code block (📝)
/link - Insert link (🔗)
/image - Insert image (🖼)
/table - Insert table (▦)
/quote - Quote (❝)
/hr - Horizontal line (—)
/task - Task/checkbox (☐)
/list - Bulleted list (•)
/h1 - H1 Heading
/h2 - H2 Heading
/h3 - H3 Heading
</code></pre>
<h2 id="tags">Tags</h2>
<p>Tags are words or phrases that describe the content of a note. In the Doxa application, they allow you to filter notes by tag.</p>
<p>Click in the tags field and enter the name of the tag (it will be saved with the note).</p>
<p>You can then search for a note using the tag in the magnifying glass field <strong>Filter notes by tag...</strong></p>
<h2 id="editing-and-deleting">Editing and deleting</h2>
<p>Inline: click on the note, edit the content and press Save now.</p>
<p>Modal: click on the ✎ icon next to the item for advanced editing in the modal window.</p>
<p>Deleting: the 🗑 icon next to the item — after confirmation, the note will be deleted.</p>
<h2 id="moving-the-order-of-notes">Moving the order of notes</h2>
<p>Use the <strong>↑ / ↓</strong> arrows on the items.</p>
<p>Or drag and drop items to the desired location — the insertion indicator will appear when dragging.</p>
<h2 id="switching-the-appearance">Switching the appearance</h2>
<p>You will find a button for switching the appearance in the top menu. The application supports three modes:</p>
<ul>
<li>Light — icon: ☀️</li>
<li>Dark — icon: 🌙</li>
<li>Respect system — icon: 🌓 — the application will follow the system choice (prefers-color-scheme) and will automatically switch if the system theme changes.</li>
</ul>
<p>By clicking the button in the menu you can cycle between modes <strong>(Light → Dark → System)</strong>. The selected option is saved in localStorage under the doxa_theme key and persists between pages and refreshes. If you want to reset the option, open the browser console and run: localStorage.removeItem('doxa_theme') or clear the storage in the developer tools.</p>
<h2 id="autosave">Autosave</h2>
<p>The application now automatically saves changes to notes locally while writing (autosave). In a regular browser, changes are saved to localStorage (doxa_notes_v1 key) without the need for manual saving — the data is saved after a short delay. If you run the application in Electron/Node mode, changes are written directly to the local file.</p>
<p><strong>Save the JSON file manually as you go!!</strong></p>
<h2 id="manual-saving">Manual saving</h2>
<p>Next to the editor you will find a Save Now button. Even though autosave saves continuously, the button is useful in the following cases:</p>
<ul>
<li><strong>Immediate save</strong> — will persist without waiting for autosave (useful before closing the application or if you want a quick confirmation that the changes are written).</li>
<li><strong>Visual confirmation</strong> — after saving, the status "Saved" will be displayed, giving the user immediate feedback.</li>
<li><strong>No download</strong> — the Save note button does not download the file; if you want to download JSON, use the Export JSON button.</li>
</ul>
<p>To transfer data between devices, use the Export JSON button (which will download the doxa.json file), or run saveNotesToFile(true) from the console.</p>
<h2 id="import-export">Import / Export</h2>
<p>To import, click Import JSON and select a file. Supported formats:</p>
<ul>
<li>Object with notes field: { "notes": [ ... ] }</li>
<li>Direct field: [ { ... }, { ... } ]</li>
</ul>
<p>Export is now available via the Export JSON button (next to the Save button). The application also performs autosave locally — you won't lose anything if you forget to save manually. To download JSON via a script, you can also run saveNotesToFile(true) in the console.</p>
<ul>
<li>Since version 26.07.04 Import/Export: the folder field is saved in JSON, backward compatible with older data (empty field).</li>
</ul>
<h2 id="export-to-markdown">Export to Markdown</h2>
<p>You can export an individual note to Markdown.</p>
<p>The export is in the format názevPoznamky.md</p>
<h2 id="search-filtration">Search (Filtration)</h2>
<ul>
<li>Filtering: the "📁 All folders" drop-down limits the list to only the selected folder.</li>
<li>Search: the field searches in the name, content, tags and folder name (fulltext).</li>
</ul>
<h2 id="folders">Folders</h2>
<ul>
<li>Folders: fill in the "Folder" field for the note or write a line in the content in the form folder: Name (the field has native suggestions — a list of existing folders).</li>
<li>Assignments can also be edited manually in the Folder field; changes are saved automatically.</li>
</ul>
<h2 id="security-and-backups">Security and backups</h2>
<p>The default mode is local-first: data remains in your browser (localStorage) or a local file, the application does not send it itself.</p>
<h2 id="common-problems">Common problems</h2>
<ul>
<li>When opening via file://, fetching static JSON may fail — use a local server or Electron.</li>
<li>Transferring data between devices? Download JSON and import it on the second device.</li>
</ul>
<hr />
<h2 id="markdown">Markdown</h2>
<h3 id="editor-uses-markdown">Editor uses Markdown</h3>
<p>The editor works with Markdown syntax. All edits are saved as Markdown (plain text) — the preview shows the rendered HTML. Below are basic examples (paste them directly into the editor or use the buttons in the toolbar):</p>
<pre><code class="language-md">Bold: **bold text**
Italic: *italic*
Strikethrough: ~~strikethrough~~
Inline code: `code`
Code block:
</code></pre>
<p>console.log('hello')</p>
<pre><code>Headings:
# Heading H1
## Heading H2
### Heading H3
List (bullets):
- item 1
- item 2
Numbered list:
1. first
2. second
Quote:
&gt; This is a quote
Table:
| Column 1 | Column 2 |
| --- | --- |
| cell 1 | cell 2 |
| cell 3 | cell 4 |
Image (reference URL):
![alt text](https://example.com/image.png)
Link:
[text](https://example.com)
Task list:
- [ ] not completed
- [x] done
</code></pre>
<h4 id="important-tips">Important tips:</h4>
<ul>
<li>Click the toolbar buttons to insert the necessary Markdown tokens automatically.</li>
<li>Press Ctrl/Cmd+B for bold, Ctrl/Cmd+I for italic, and Ctrl/Cmd+` for inline code.</li>
<li>The Preview button toggles Markdown rendering; use it to verify the result.</li>
<li>The Table button (▦) inserts a table template and prompts you for a number of characters during insertion columns and rows.</li>
<li>Insert images as URLs — the app does not sync or upload images.</li>
<li>Markdown is portable: notes remain readable even without the app (export/import).</li>
</ul></div>
            </div>
        </div>

        <footer class="col-md-12">
            <hr>
            <p>Documentation built with <a href="https://www.mkdocs.org/">MkDocs</a>.</p>
        </footer>
        <script src="../js/bootstrap.bundle.min.js"></script>
        <script>
            var base_url = "..",
                shortcuts = {"help": 191, "next": 78, "previous": 80, "search": 83};
        </script>
        <script src="../js/base.js"></script>
        <script src="../search/main.js"></script>

        <div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="searchModalLabel">Search</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>From here you can search these documents. Enter your search terms below.</p>
                <form>
                    <div class="form-group">
                        <input type="search" class="form-control" placeholder="Search..." id="mkdocs-search-query" title="Type search term here">
                    </div>
                </form>
                <div id="mkdocs-search-results" data-no-results-text="No results found"></div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div><div class="modal" id="mkdocs_keyboard_modal" tabindex="-1" role="dialog" aria-labelledby="keyboardModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <table class="table">
                <thead>
                  <tr>
                    <th style="width: 20%;">Keys</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="help shortcut"><kbd>?</kbd></td>
                    <td>Open this help</td>
                  </tr>
                  <tr>
                    <td class="next shortcut"><kbd>n</kbd></td>
                    <td>Next page</td>
                  </tr>
                  <tr>
                    <td class="prev shortcut"><kbd>p</kbd></td>
                    <td>Previous page</td>
                  </tr>
                  <tr>
                    <td class="search shortcut"><kbd>s</kbd></td>
                    <td>Search</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

    </body>
</html>