webcode/syntax/basis.php

<?php
/**
 * Plugin Webcode: Show webcode (Css, HTML) in a iframe
 *
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Nicolas GERARD
 */

// must be run within Dokuwiki
use dokuwiki\Extension\Event;

if (!defined('DOKU_INC')) die();

/**
 * All DokuWiki plugins to extend the parser/rendering mechanism
 * need to inherit from this class
 */
class syntax_plugin_webcode_basis extends DokuWiki_Syntax_Plugin
{

    const EXTERNAL_RESOURCES_ATTRIBUTE_DISPLAY = 'externalResources'; // In the action bar
    const EXTERNAL_RESOURCES_ATTRIBUTE_KEY = 'externalresources'; // In the code

    // Simple cache bursting implementation for the webCodeConsole.(js|css) file
    // They must be incremented manually when they changed
    const WEB_CONSOLE_CSS_VERSION = 1.1;
    const WEB_CONSOLE_JS_VERSION = 2.1;

    /**
     * @var array that holds the iframe attributes
     */
    private $attributes = array();
    /**
     * @var array That holds the code parts
     */

    private $codes = array();

    /**
     * Print the output of the console javascript function ?
     */
    private $useConsole = false;

    /**
     * @param $mode
     * @param array $instructions
     * @param array $info - the $info of the renderer to pass context information
     * @return string|null
     * Wrapper around {@link p_render()} that pass the $info through tho the created Renderer
     */
    private static function p_render($mode, array $instructions, array &$info)
    {
        if (is_null($instructions)) return '';
        if ($instructions === false) return '';

        $Renderer = p_get_renderer($mode);
        if (is_null($Renderer)) return null;

        $Renderer->reset();
        if (!empty($info)) {
            $Renderer->info = $info;
        }

        $Renderer->smileys = getSmileys();
        $Renderer->entities = getEntities();
        $Renderer->acronyms = getAcronyms();
        $Renderer->interwiki = getInterwiki();

        // Loop through the instructions
        foreach ($instructions as $instruction) {
            // Execute the callback against the Renderer
            if (method_exists($Renderer, $instruction[0])) {
                call_user_func_array(array(&$Renderer, $instruction[0]), $instruction[1] ? $instruction[1] : array());
            }
        }

        //set info array
        $info = $Renderer->info;

        // Post process and return the output
        $data = array($mode, & $Renderer->doc);
        Event::createAndTrigger('RENDERER_CONTENT_POSTPROCESS', $data);
        return $Renderer->doc;

    }


    /**
     * Syntax Type.
     *
     * Needs to return one of the mode types defined in $PARSER_MODES in parser.php
     * @see https://www.dokuwiki.org/devel:syntax_plugins#syntax_types
     *
     * container because it may contain header in case of how to
     */
    public function getType()
    {
        // formatting ?
        // container
        return 'container';
    }

    /**
     * @return array
     * Allow which kind of plugin inside
     *
     * array('container', 'baseonly','formatting', 'substition', 'protected', 'disabled', 'paragraphs')
     *
     */
    public function getAllowedTypes()
    {
        return array('container', 'baseonly', 'formatting', 'substition', 'protected', 'disabled', 'paragraphs');
    }

    /*
     * Don't accept the code mode
     * in order to get the code block
     * in the DOKU_LEXER_MATCHED state through addPattern
     */
    function accepts($mode)
    {
        if ($mode == "code" || $mode == "plugin_combo_code") {
            return false;
        }
        return parent::accepts($mode);
    }


    /**
     * @see Doku_Parser_Mode::getSort()
     * The mode (plugin) with the lowest sort number will win out
     *
     * See {@link Doku_Parser_Mode_code}
     */
    public function getSort()
    {
        return 100;
    }

    /**
     * Called before any calls to ConnectTo
     * @return void
     */
    function preConnect()
    {
    }

    /**
     * Create a pattern that will called this plugin
     *
     * @param string $mode
     *
     * All dokuwiki mode can be seen in the parser.php file
     * @see Doku_Parser_Mode::connectTo()
     */
    public function connectTo($mode)
    {

        $this->Lexer->addEntryPattern('<webcode.*?>(?=.*?</webcode>)', $mode, $this->getPluginMode());

    }


    // This where the addPattern and addExitPattern are defined
    public function postConnect()
    {

        /**
         * Capture all code block
         * See {@link Doku_Parser_Mode_code}
         */
        $this->Lexer->addPattern('<code.*?</code>', $this->getPluginMode());

        /**
         * End
         */
        $this->Lexer->addExitPattern('</webcode>', $this->getPluginMode());

    }


    /**
     * Handle the match
     * You get the match for each pattern in the $match variable
     * $state says if it's an entry, exit or match pattern
     *
     * This is an instruction block and is cached apart from the rendering output
     * There is two caches levels
     * This cache may be suppressed with the url parameters ?purge=true
     *
     * The returned values are cached in an array that will be passed to the render method
     * The handle function goal is to parse the matched syntax through the pattern function
     * and to return the result for use in the renderer
     * This result is always cached until the page is modified.
     * @param string $match
     * @param int $state
     * @param int $pos
     * @param Doku_Handler $handler
     * @return array|bool
     * @throws Exception
     * @see DokuWiki_Syntax_Plugin::handle()
     *
     */
    public function handle($match, $state, $pos, Doku_Handler $handler)
    {
        switch ($state) {

            case DOKU_LEXER_ENTER :

                // We got the first webcode tag and its attributes

                $match = substr($match, 8, -1); //9 = strlen("<webcode")

                // Reset of the attributes
                // With some framework the php object may be still persisted in memory
                // And you may get some attributes from other page
                $attributes = array();
                $attributes['frameborder'] = 1;
                $attributes['width'] = '100%';

                $renderingModeKey = 'renderingmode';
                $attributes[$renderingModeKey] = 'story';

                // config Parameters will get their value in lowercase
                $configAttributes = [$renderingModeKey];

                // /i not case sensitive
                $attributePattern = "\s*(\w+)\s*=\s*\"?([^\"\s]+)\"?\\s*";
                $result = preg_match_all('/' . $attributePattern . '/i', $match, $matches);


                if ($result != 0) {
                    foreach ($matches[1] as $key => $lang) {
                        $attributeKey = strtolower($lang);
                        $attributeValue = $matches[2][$key];
                        if (in_array($attributeKey, $configAttributes)) {
                            $attributeValue = strtolower($attributeValue);
                        }
                        $attributes[$attributeKey] = $attributeValue;
                    }
                }

                // We set the attributes on a class scope
                // to be used in the DOKU_LEXER_UNMATCHED step
                $this->attributes = $attributes;

                // Cache the values to be used by the render method
                return array($state, $attributes);


            /**
             * The code block as asked
             * by addPattern() into {@link postConnect}
             */
            case DOKU_LEXER_MATCHED:

                $xhtmlWebCode = "";

                // We got the content between the webcode tag and its attributes
                // We parse it in order to extract the code in the codes array
                $codes = array();
                /**
                 * Does the javascript contains a console statement
                 */
                $useConsole = false;

                // Regexp Pattern to parse the codes block
                $codePattern = "<code\s*([^>\s]*)\s*([^>\s]*)>(.+?)<\/code>";
                // The first group is the lang
                // The second group is the file name and options
                // The third group is the code
                $result = preg_match_all('/' . $codePattern . '/msi', $match, $matches, PREG_PATTERN_ORDER);
                if ($result) {

                    // Loop through the block codes
                    foreach ($matches[1] as $key => $lang) {

                        // Get the code (The content between the code nodes)
                        // We ltrim because the match gives us the \n at the beginning and at the end
                        $code = ltrim($matches[3][$key]);

                        // String are in lowercase
                        $lowerCodeName = strtolower($lang);

                        // Xml is html
                        if ($lowerCodeName == 'xml') {
                            $lowerCodeName = 'html';
                        }

                        // If the code doesn't exist in the array, index it otherwise append it
                        if (!array_key_exists($lowerCodeName, $codes)) {
                            $codes[$lowerCodeName] = $code;
                        } else {
                            $codes[$lowerCodeName] = $codes[$lowerCodeName] . $code;
                        }

                        // Check if a javascript console function is used, only if the flag is not set to true
                        if (!$useConsole == true) {
                            if (in_array($lowerCodeName, array('babel', 'javascript', 'html', 'xml'))) {
                                // if the code contains 'console.'
                                $result = preg_match('/' . 'console\.' . '/is', $code);
                                if ($result) {
                                    $useConsole = true;
                                }
                            }
                        }
                    }
                    $matchedTextToRender = "";
                    // Render the whole
                    if ($this->attributes["renderingmode"] != "onlyresult") {

                        // Replace babel by javascript because babel highlight does not exist in the dokuwiki and babel is only javascript ES2015
                        $matchedTextToRender = preg_replace('/<code[\s]+babel/', '<code javascript', $match);

                        // Delete a display="none" block
                        $matchedTextToRender = preg_replace('/<code([a-z\s]*)\[([a-z\s]*)display="none"([a-z\s]*)\]>(.*)<\/code>/msiU', '', $matchedTextToRender);

                    }
                    return array($state, $matchedTextToRender, $codes, $useConsole);

                } else {
                    throw new Exception("There was a match of the pattern but not when parsing");
                }


            case DOKU_LEXER_UNMATCHED :

                // Cache the values
                return array($state, $match);

            case DOKU_LEXER_EXIT:

                // Cache the values
                return array($state);

        }

    }

    /**
     * Render the output
     * @param string $mode
     * @param Doku_Renderer $renderer
     * @param array $data - what the function handle() return'ed
     * @return bool - rendered correctly (not used)
     *
     * The rendering process
     * @see DokuWiki_Syntax_Plugin::render()
     *
     */
    public function render($mode, Doku_Renderer $renderer, $data)
    {
        // The $data variable comes from the handle() function
        //
        // $mode = 'xhtml' means that we output html
        // There is other mode such as metadata where you can output data for the headers (Not 100% sure)
        if ($mode == 'xhtml') {

            /** @var Doku_Renderer_xhtml $renderer */

            $state = $data[0];
            switch ($state) {

                case DOKU_LEXER_ENTER :

                    // The extracted data are the attribute of the webcode tag
                    // We put in a class variable so that we can use in the last step (DOKU_LEXER_EXIT)
                    $this->attributes = $data[1];

                    // Reinit the codes to make sure that the code does not leak into another webcode
                    $this->useConsole = false;
                    $this->codes = array();
                    break;

                case DOKU_LEXER_MATCHED :

                    // The extracted data are the codes for this step
                    // We put them in a class variable so that we can use them in the last step (DOKU_LEXER_EXIT)
                    $code = $data[2];
                    $codeType = key($code);
                    $this->codes[$codeType] = $this->codes[$codeType] . $code[$codeType];

                    // if not true, see if it's true
                    if (!$this->useConsole) {
                        $this->useConsole = $data[3];
                    }

                    // Render
                    $textToRender = $data[1];
                    if (!empty($textToRender)) {
                        $instructions = p_get_instructions($textToRender);
                        $xhtmlWebCode = self::p_render('xhtml', $instructions, $renderer->info);
                        $renderer->doc .= $xhtmlWebCode;
                    }
                    break;

                case DOKU_LEXER_UNMATCHED :

                    // Render and escape
                    $renderer->doc .= $renderer->_xmlEntities($data[1]);
                    break;

                case DOKU_LEXER_EXIT :
                    // Create the real output of webcode
                    if (sizeof($this->codes) == 0) {
                        return false;
                    }
                    // Dokuwiki Code ?
                    if (array_key_exists('dw', $this->codes)) {
                        $instructions = p_get_instructions($this->codes['dw']);
                        $renderer->doc .= self::p_render('xhtml', $instructions, $renderer->info);
                    } else {

                        // Js, Html, Css
                        $htmlContent = '<html><head>';
                        $htmlContent .= '<meta http-equiv="content-type" content="text/html; charset=UTF-8">';
                        $htmlContent .= '<title>Made by Webcode</title>';
                        $htmlContent .= '<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">';


                        // External Resources such as css stylesheet or js
                        $externalResources = array();
                        if (array_key_exists(self::EXTERNAL_RESOURCES_ATTRIBUTE_KEY, $this->attributes)) {
                            $externalResources = explode(",", $this->attributes[self::EXTERNAL_RESOURCES_ATTRIBUTE_KEY]);
                        }

                        // Babel Preprocessor, if babel is used, add it to the external resources
                        if (array_key_exists('babel', $this->codes)) {
                            $babelMin = "https://unpkg.com/babel-standalone@6/babel.min.js";
                            // a load of babel invoke it (be sure to not have it twice
                            if (!(array_key_exists($babelMin, $externalResources))) {
                                $externalResources[] = $babelMin;
                            }
                        }

                        // Add the external resources
                        foreach ($externalResources as $externalResource) {
                            $pathInfo = pathinfo($externalResource);
                            $fileExtension = $pathInfo['extension'];
                            switch ($fileExtension) {
                                case 'css':
                                    $htmlContent .= '<link rel="stylesheet" type="text/css" href="' . $externalResource . '">';
                                    break;
                                case 'js':
                                    $htmlContent .= '<script type="text/javascript" src="' . $externalResource . '"></script>';
                                    break;
                            }
                        }


                        // WebConsole style sheet
                        if ($this->useConsole) {
                            $htmlContent .= '<link rel="stylesheet" type="text/css" href="' . DOKU_URL . 'lib/plugins/webcode/webCodeConsole.css?ver=' . self::WEB_CONSOLE_CSS_VERSION . '"/>';
                        }

                        if (array_key_exists('css', $this->codes)) {
                            $htmlContent .= '<!-- The CSS code -->';
                            $htmlContent .= '<style>' . $this->codes['css'] . '</style>';
                        };
                        $htmlContent .= '</head><body style="margin:10px">';
                        if (array_key_exists('html', $this->codes)) {
                            $htmlContent .= '<!-- The HTML code -->';
                            $htmlContent .= $this->codes['html'];
                        }
                        // The javascript console area is based at the end of the HTML document
                        if ($this->useConsole) {
                            $htmlContent .= '<!-- WebCode Console -->';
                            $htmlContent .= '<div><p class=\'webConsoleTitle\'>Console Output:</p>';
                            $htmlContent .= '<div id=\'webCodeConsole\'/>';
                            $htmlContent .= '<script type=\'text/javascript\' src=\'' . DOKU_URL . 'lib/plugins/webcode/webCodeConsole.js?ver=' . self::WEB_CONSOLE_JS_VERSION . '\'></script>';
                            $htmlContent .= '</div>';
                        }
                        // The javascript comes at the end because it may want to be applied on previous HTML element
                        // as the page load in the IO order, javascript must be placed at the end
                        if (array_key_exists('javascript', $this->codes)) {
                            $htmlContent .= '<!-- The Javascript code -->';
                            $htmlContent .= '<script type="text/javascript">' . $this->codes['javascript'] . '</script>';
                        }
                        if (array_key_exists('babel', $this->codes)) {
                            $htmlContent .= '<!-- The Babel code -->';
                            $htmlContent .= '<script type="text/babel">' . $this->codes['babel'] . '</script>';
                        }
                        $htmlContent .= '</body></html>';

                        // Here the magic from the plugin happens
                        // We add the Iframe and the JsFiddleButton
                        $iFrameHtml = '<iframe ';

                        // We add the name HTML attribute
                        $name = "WebCode iFrame";
                        if (array_key_exists('name', $this->attributes)) {
                            $name .= ' ' . $this->attributes['name'];
                        }
                        $iFrameHtml .= ' name="' . $name . '" ';

                        // The class to be able to select them
                        $iFrameHtml .= ' class="webCode" ';

                        // We add the others HTML attributes
                        $iFrameHtmlAttributes = array('width', 'height', 'frameborder', 'scrolling');
                        foreach ($this->attributes as $attribute => $value) {
                            if (in_array($attribute, $iFrameHtmlAttributes)) {
                                $iFrameHtml .= ' ' . $attribute . '=' . $value;
                            }
                        }
                        $iFrameHtml .= ' srcdoc="' . htmlentities($htmlContent) . '" ></iframe>';//

                        // Credits bar
                        $bar = '<div class="webcode-bar">';
                        $bar .= '<div class="webcode-bar-item"><a href="https://combostrap.com/webcode">' . $this->getLang('RenderedBy') . '</a></div>';
                        $bar .= '<div class="webcode-bar-item">'.$this->addJsFiddleButton($this->codes, $this->attributes).'</div>';
                        $bar .= '</div>';
                        $renderer->doc .= '<div class="webcode">' . $iFrameHtml . $bar . '</div>';
                    }

                    break;
            }

            return true;
        }
        return false;
    }

    /**
     * @param array $codes the array containing the codes
     * @param array $attributes the attributes of a call (for now the externalResources)
     * @return string the HTML form code
     *
     * Specification, see http://doc.jsfiddle.net/api/post.html
     */
    public function addJsFiddleButton($codes, $attributes)
    {

        $postURL = "https://jsfiddle.net/api/post/library/pure/"; //No Framework

        $externalResources = array();
        if (array_key_exists(self::EXTERNAL_RESOURCES_ATTRIBUTE_KEY, $attributes)) {
            $externalResources = explode(",", $attributes[self::EXTERNAL_RESOURCES_ATTRIBUTE_KEY]);
        }


        if ($this->useConsole) {
            // If their is a console.log function, add the Firebug Lite support of JsFiddle
            // Seems to work only with the Edge version of jQuery
            // $postURL .= "edge/dependencies/Lite/";
            // The firebug logging is not working anymore because of 404
            // Adding them here
            $externalResources[] = 'The firebug resources for the console.log features';
            $externalResources[] = DOKU_URL . 'lib/plugins/webcode/vendor/firebug-lite.css';
            $externalResources[] = DOKU_URL . 'lib/plugins/webcode/vendor/firebug-lite-1.2.js';
        }

        // The below code is to prevent this JsFiddle bug: https://github.com/jsfiddle/jsfiddle-issues/issues/726
        // The order of the resources is not guaranteed
        // We pass then the resources only if their is one resources
        // Otherwise we pass them as a script element in the HTML.
        if (count($externalResources) <= 1) {
            $externalResourcesInput = '<input type="hidden" name="resources" value="' . implode(",", $externalResources) . '">';
        } else {
            $codes['html'] .= "\n\n\n\n\n<!-- The resources -->\n";
            $codes['html'] .= "<!-- They have been added here because their order is not guarantee through the API. -->\n";
            $codes['html'] .= "<!-- See: https://github.com/jsfiddle/jsfiddle-issues/issues/726 -->\n";
            foreach ($externalResources as $externalResource) {
                if ($externalResource != "") {
                    $extension = pathinfo($externalResource)['extension'];
                    switch ($extension) {
                        case "css":
                            $codes['html'] .= "<link href=\"" . $externalResource . "\" rel=\"stylesheet\">\n";
                            break;
                        case "js":
                            $codes['html'] .= "<script src=\"" . $externalResource . "\"></script>\n";
                            break;
                        default:
                            $codes['html'] .= "<!-- " . $externalResource . " -->\n";
                    }
                }
            }
        }

        $jsCode = $codes['javascript'];
        $jsPanel = 0; // language for the js specific panel (0 = JavaScript)
        if (array_key_exists('babel', $this->codes)) {
            $jsCode = $codes['babel'];
            $jsPanel = 3; // 3 = Babel
        }

        // Title and description
        global $ID;
        $title = $attributes['name'];
        $pageTitle = tpl_pagetitle($ID, true);
        if (!$title) {

            $title = "Code from " . $pageTitle;
        }
        $description = "Code from the page '" . $pageTitle . "' \n" . wl($ID, $absolute = true);
        return '<form  method="post" action="' . $postURL . '" target="_blank">' .
        '<input type="hidden" name="title" value="' . htmlentities($title) . '">' .
        '<input type="hidden" name="description" value="' . htmlentities($description) . '">' .
        '<input type="hidden" name="css" value="' . htmlentities($codes['css']) . '">' .
        '<input type="hidden" name="html" value="' . htmlentities("<!-- The HTML -->" . $codes['html']) . '">' .
        '<input type="hidden" name="js" value="' . htmlentities($jsCode) . '">' .
        '<input type="hidden" name="panel_js" value="' . htmlentities($jsPanel) . '">' .
        '<input type="hidden" name="wrap" value="b">' .  //javascript no wrap in body
        $externalResourcesInput .
        '<button>' . $this->getLang('JsFiddleButtonContent') . '</button>' .
        '</form>';

    }

    /**
     * @param $codes the array containing the codes
     * @param $attributes the attributes of a call (for now the externalResources)
     * @return string the HTML form code
     */
    public function addCodePenButton($codes, $attributes)
    {
        // TODO
        // http://blog.codepen.io/documentation/api/prefill/
    }


    /**
     * @return string the mode (the name of this plugin for the lexer)
     */
    public function getPluginMode()
    {
        $pluginName = $this->getPluginName();
        $pluginComponent = $this->getPluginComponent();
        return 'plugin_' . $pluginName . '_' . $pluginComponent;
    }


}