Drafts Directory

Action

Edit Markdown Table

Posted by agiletortoise, Last update over 3 years ago

Demonstration action that uses the Table Magic Markdown table editing library to modify Markdown tables in an advanced HTML Preview.

This tools allows editing of table in forms, CSV, etc. Select an existing Markdown table in the draft before running the action to pre-populate the editor.

Trusted member

Steps

  • script

    // locate range and default table value
let [st, len] = editor.getSelectedLineRange();

let text = `| Col1 | Col2 |
| --- | --- |
| Val1 | Val2 |`;
if (len > 1) {
	text = editor.getTextInRange(st, len);
}

  • script

    const template = `<!DOCTYPE html>
<html lang="en">

<head>
    <title>table-magic</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/showdownjs/showdown/1.2.2/dist/showdown.min.js"></script>
    <script src="https://config.agiletortoise.com/drafts-action-resources/magic.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/primer/2.3.3/primer.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.1.0/octicons.min.css">
    <link rel="stylesheet" type="text/css"
        href="https://config.agiletortoise.com/drafts-action-resources/magic-styles.css">
</head>

<body onload="initialValues();">

    <div class="masthead">
        <div class="container">
            <div class="title">table-magic</div>
        </div>
    </div>

    <div class="container">

        <div class="tabnav">
            <nav class="tabnav-tabs">
                <a href="#" class="tabnav-tab selected" id="tab-csv" onclick="changeTab('csv');"><span
                        class="octicon octicon-file-text"></span> CSV/TSV</a>
                <a href="#" class="tabnav-tab" id="tab-md" onclick="changeTab('md');"><span
                        class="octicon octicon-code"></span> Markdown</a>
                <a href="#" class="tabnav-tab" id="tab-sql" onclick="changeTab('sql');"><span
                        class="octicon octicon-database"></span> SQL</a>
                <a href="#" class="tabnav-tab" id="tab-html" onclick="changeTab('html');"><span
                        class="octicon octicon-file-code"></span> HTML</a>
                <a href="#" class="tabnav-tab" id="tab-form" onclick="changeTab('form');"><span
                        class="octicon octicon-pencil"></span> Form</a>
                <a href="#" class="tabnav-tab" id="tab-preview" onclick="changeTab('preview');"><span
                        class="octicon octicon-browser"></span> Preview</a>
            </nav>
        </div>

        <div class="form-tools">

            <div class="form-button" id="tablebuilder-start" title="Drag out a new table">
                <span class="octicon octicon-plus"></span> New table
            </div>

            <div class="form-button" id="new-row" title="Add a row to the bottom">
                <span class="octicon octicon-triangle-down"></span> Add row
            </div>

            <div class="form-button" id="new-column" title="Add a column to the right">
                <span class="octicon octicon-triangle-right"></span> Add column
            </div>

            <div class="form-button" id="toggle-delete" title="Toggle deletion of rows and columns">
                <span class="octicon octicon-trashcan"></span> Enable deletion
            </div>

        </div>

    </div>
    <div class="container" id="viewport">

        <div id="display"></div>

    </div>
    <div class="container">

        <div id="csv-options" class="options">
            <p>
                <!--
                <button class="btn" type="button" onclick="downloadCsv();"><span
                        class="octicon octicon-cloud-download"></span> Download</button>
                        -->
            </p>
        </div>

        <div id="md-options" class="options">
            <div class="form-checkbox">
                <label>
                    <input type="checkbox" checked="checked" id="check-formatter">
                    Table formatter
                </label>
                <p class="note">
                    Makes markdown more legible.
                </p>
            </div>
        </div>

        <div id="sql-info" class="options">
            <p class="note">
                Read about the SQL function <a href="https://github.com/stevecat/table-magic/pull/20">in this pull
                    request</a>.
            </p>
        </div>

        <div class="footer">
            <div style="margin: 1em; padding: 1em;">
                <button onclick="cancel();" style='font-size: 1.5em;'>Cancel</button>&nbsp;
                <button onclick="submit();"  style='font-size: 1.5em;color: black;'>Save Changes</button>
            </div>



            built using table-magic | <a href="http://www.github.com/stevecat/table-magic">repo</a>
        </div>

    </div>

    <script>

        const initialMarkdown = \`[[markdown]]\`;

        function initialValues() {
            layout(false);
            $('textarea').removeClass('md');
            $('#md-options').hide();

            let array = md2array(initialMarkdown);
            let html = array2preview(array);
            array_storge = array; // Store the array
            $('.preview').html(html);

            $('.tabnav-tab').removeClass('selected');
            $('#tab-preview').addClass('selected');

            // Update variables
            tab = 'preview';
        }

        function submit() {
            changeTab('md');
            let text = $('textarea').val();
            Drafts.send('markdown', text);
            Drafts.continue();
        }

        function cancel() {
            Drafts.cancel();
        }

    </script>
</body>
</html>`;

const html = template.replace("[[markdown]]", text);

let preview = HTMLPreview.create();
preview.hideInterface = true;

if (preview.show(html)) {
	let result = context.previewValues["markdown"];
	if (len <= 1) {
		result = `
${result}		
`;
	}
	editor.setTextInRange(st, len, result);
	editor.setSelectedRange(st, result.length);
}
else {
	context.cancel();
}

Options

  • After Success Default
    Notification Error
    Log Level Error
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

Download on App Store Download on Mac App Store

© 2012-2023 by Agile Tortoise, Inc.
Drafts is a registered Trademark of Agile Tortoise, Inc.
Privacy | Terms