Commit 9ec1cb93 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

fix(md-editor): build new markdown editor with lit + github/markdown-toolbar-element 

- create markdown-write-preview + markdown-preview webcomponents using lit
- create
form_markdown_editor helper form component
- simplify form_dropdown and form_multiselect
components
- fix partner fields display

fixes #93, #94, #120
parent 910d457c

.devcontainer/devcontainer.json

+11 −10
Original line number Diff line number Diff line
@@ -25,19 +25,20 @@ 
    }

  },

  "extensions": [

    "mikestead.dotenv",

    "bierner.lit-html",

    "bmewburn.vscode-intelephense-client",

    "streetsidesoftware.code-spell-checker",

    "naumovs.color-highlight",

    "heybourn.headwind",

    "wayou.vscode-todo-highlight",

    "esbenp.prettier-vscode",

    "bradlc.vscode-tailwindcss",

    "jamesbirtles.svelte-vscode",

    "breezelin.phpstan",

    "dbaeumer.vscode-eslint",

    "stylelint.vscode-stylelint",

    "eamodio.gitlens",

    "breezelin.phpstan",

    "kasik96.latte"

    "esbenp.prettier-vscode",

    "heybourn.headwind",

    "jamesbirtles.svelte-vscode",

    "kasik96.latte",

    "mikestead.dotenv",

    "naumovs.color-highlight",

    "streetsidesoftware.code-spell-checker",

    "stylelint.vscode-stylelint",

    "wayou.vscode-todo-highlight"

  ]

}

app/Helpers/form_helper.php

+97 −42
Original line number Diff line number Diff line
@@ -157,17 +157,9 @@ if (! function_exists('form_multiselect')) { 
    ): string {

        $defaultExtra = [

            'data-class' => $customExtra['class'],

            'data-select-text' => lang('Common.forms.multiSelect.selectText'),

            'data-loading-text' => lang('Common.forms.multiSelect.loadingText'),

            'data-no-results-text' => lang('Common.forms.multiSelect.noResultsText'),

            'data-no-choices-text' => lang('Common.forms.multiSelect.noChoicesText'),

            'data-max-item-text' => lang('Common.forms.multiSelect.maxItemText'),

            'multiple' => 'multiple',

        ];

        $extra = stringify_attributes(array_merge($defaultExtra, $customExtra));



        if (stripos($extra, 'multiple') === false) {

            $extra .= ' multiple="multiple"';

        }

        $extra = array_merge($defaultExtra, $customExtra);



        return form_dropdown($name, $options, $selected, $extra);

    }
@@ -179,43 +171,31 @@ if (! function_exists('form_dropdown')) { 
    /**

     * Drop-down Menu (based on html select tag)

     *

     * @param array<string, mixed>|string $data

     * @param array<string, string> $options

     * @param string|string[] $selected

     * @param array<string, mixed>|string $extra

     * @param array<string, mixed> $options

     * @param string[] $selected

     * @param array<string, mixed> $customExtra

     */

    function form_dropdown(

        string | array $data = '',

        string $name = '',

        array $options = [],

        string | array $selected = [],

        string | array $extra = ''

        array $selected = [],

        array $customExtra = []

    ): string {

        $defaults = [];

        if (is_array($data)) {

            if (isset($data['selected'])) {

                $selected = $data['selected'];

                unset($data['selected']); // select tags don't have a selected attribute

            }

            if (isset($data['options'])) {

                $options = $data['options'];

                unset($data['options']); // select tags don't use an options attribute

            }

        } else {

        $defaultExtra = [

            'data-select-text' => lang('Common.forms.multiSelect.selectText'),

            'data-loading-text' => lang('Common.forms.multiSelect.loadingText'),

            'data-no-results-text' => lang('Common.forms.multiSelect.noResultsText'),

            'data-no-choices-text' => lang('Common.forms.multiSelect.noChoicesText'),

            'data-max-item-text' => lang('Common.forms.multiSelect.maxItemText'),

        ];

        $extra = array_merge($defaultExtra, $customExtra);

        $defaults = [

                'name' => $data,

            'name' => $name,

        ];

        }



        if (! is_array($selected)) {

            $selected = [$selected];

        }

        if (! is_array($options)) {

            $options = [$options];

        }



        // standardize selected as strings, like  the option keys will be.

        foreach ($selected as $key => $item) {

            $selected[$key] = (string) $item;

            $selected[$key] = $item;

        }



        $placeholderOption = '';
@@ -230,11 +210,10 @@ if (! function_exists('form_dropdown')) { 


        $extra = stringify_attributes($extra);

        $multiple = (count($selected) > 1 && stripos($extra, 'multiple') === false) ? ' multiple="multiple"' : '';

        $form = '<select ' . rtrim(parse_form_attributes($data, $defaults)) . $extra . $multiple . ">\n";

        $form = '<select ' . rtrim(parse_form_attributes($name, $defaults)) . $extra . $multiple . ">\n";

        $form .= $placeholderOption;



        foreach ($options as $key => $val) {

            $key = (string) $key;

            if (is_array($val)) {

                if ($val === []) {

                    continue;
@@ -257,4 +236,80 @@ if (! function_exists('form_dropdown')) { 
    }

}



//--------------------------------------------------------------------



if (! function_exists('form_editor')) {

    /**

     * Markdown editor

     *

     * @param array<string, mixed> $data

     * @param array<string, mixed>|string $extra

     */

    function form_markdown_editor(array $data = [], string $value = '', string | array $extra = ''): string

    {

        $editorClass = 'w-full flex flex-col bg-white border border-gray-500 focus-within:ring-1 focus-within:ring-blue-600';

        if (array_key_exists('class', $data) && $data['class'] !== '') {

            $editorClass .= ' ' . $data['class'];

            unset($data['class']);

        }



        $data['class'] = 'border-none outline-none focus:border-none focus:outline-none w-full h-full';



        return '<div class="' . $editorClass . '">' .

            '<header class="sticky top-0 z-20 flex flex-wrap justify-between bg-white border-b border-gray-500">' .

                '<markdown-write-preview for="' . $data['id'] . '" class="relative inline-flex h-8">' .

                    '<button type="button" slot="write" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">' . lang(

                        'Common.forms.editor.write'

                    ) . '</button>' .

                    '<button type="button" slot="preview" class="px-2 focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">' . lang(

                        'Common.forms.editor.preview'

                    ) . '</button>' .

                '</markdown-write-preview>' .

                '<markdown-toolbar for="' . $data['id'] . '" class="flex gap-4 px-2 py-1">' .

                    '<div class="inline-flex text-2xl gap-x-1">' .

                        '<md-header class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(

                            'heading'

                        ) . '</md-header>' .

                        '<md-bold class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(

                            'bold'

                        ) . '</md-bold>' .

                        '<md-italic class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(

                            'italic'

                        ) . '</md-italic>' .

                    '</div>' .

                    '<div class="inline-flex text-2xl gap-x-1">' .

                        '<md-unordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(

                            'list-unordered'

                        ) . '</md-unordered-list>' .

                        '<md-ordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(

                            'list-ordered'

                        ) . '</md-ordered-list>' .

                    '</div>' .

                    '<div class="inline-flex text-2xl gap-x-1">' .

                        '<md-quote class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(

                            'quote'

                        ) . '</md-quote>' .

                        '<md-link class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(

                            'link'

                        ) . '</md-link>' .

                        '<md-image class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(

                            'image-add'

                        ) . '</md-image>' .

                    '</div>' .

                '</markdown-toolbar>' .

            '</header>' .

            '<div class="relative">' .

                form_textarea($data, $value, $extra) .

                '<markdown-preview for="' . $data['id'] . '" class="absolute top-0 left-0 hidden w-full h-full p-2 overflow-y-auto prose bg-gray-50" showClass="bg-white"></markdown-preview>' .

            '</div>' .

            '<footer class="flex px-2 py-1 bg-gray-100 border-t">' .

                '<a href="https://commonmark.org/help/" class="inline-flex items-center text-xs font-semibold text-gray-500 hover:text-gray-700" target="_blank" rel="noopener noreferrer">' . icon(

                    'markdown',

                    'mr-1 text-lg text-gray-400'

                ) . lang('Common.forms.editor.help') . '</a>' .

            '</footer>' .

        '</div>';

    }

}



// ------------------------------------------------------------------------

app/Language/en/Common.php

+5 −0
Original line number Diff line number Diff line
@@ -24,6 +24,11 @@ return [ 
    'pageInfo' => 'Page {currentPage} out of {pageCount}',

    'go_back' => 'Go back',

    'forms' => [

        'editor' => [

            'write' => 'Write',

            'preview' => 'Preview',

            'help' => 'Powered by markdown',

        ],

        'multiSelect' => [

            'selectText' => 'Press to select',

            'loadingText' => 'Loading...',

app/Language/fr/Common.php

+5 −0
Original line number Diff line number Diff line
@@ -24,6 +24,11 @@ return [ 
    'pageInfo' => 'Page {currentPage} sur {pageCount}',

    'go_back' => 'Retour en arrière',

    'forms' => [

        'editor' => [

            'write' => 'Écrire',

            'preview' => 'Aperçu',

            'help' => 'Propulsé par markdown',

        ],

        'multiSelect' => [

            'selectText' => 'Cliquez pour selectionner',

            'loadingText' => 'Chargement...',

app/Resources/icons/bold.svg

0 → 100644
+6 −0
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

    <g>

        <path fill="none" d="M0 0h24v24H0z"/>

        <path d="M8 11h4.5a2.5 2.5 0 1 0 0-5H8v5zm10 4.5a4.5 4.5 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.498 4.498 0 0 1 18 15.5zM8 13v5h5.5a2.5 2.5 0 1 0 0-5H8z"/>

    </g>

</svg>