README

Everything for writing Texy in a Nette application: safe HTML with highlighted code blocks, a toolbar with a preview for the textarea and a copy button for code blocks. Only Bootstrap 5 classes, no extra styles.

Requirements

PHP >= 8.3, < 9
Nette Framework 3.2
Composer, npm
Bootstrap 5.3

Installation

composer require drago-ex/texy-toolbar

extensions:
	texy: Drago\Texy\DI\TexyExtension

# optional, the level of the first heading (default 2, as the page title is the <h1>)
texy:
	headingTop: 2

Several packages may register the extension under the same name in their own config files.

Texy to HTML

Drago\Texy\TexyFormatter converts the text to HTML that can be printed without escaping: raw HTML is limited to safe tags, links and images to safe URLs. Code blocks with a language (/--code php, also html, latte, css, js, sql, neon) are highlighted.

$this->template->content = $this->texyFormatter->toHtml($page->content);

For texts of visitors, e.g. comments, toBasicHtml() allows only bold, italic, links (with rel="nofollow"), lists, quotes and code, and keeps the line breaks; no images, headings, tables or HTML tags.

createTexy() and createBasicTexy() give the configured Texy for a text that needs something else. Drago\Texy\Highlighter can also be used alone: $highlighter->highlight($code, 'php').

Toolbar

Add the Composer package as a local npm dependency and run npm install:

{
	"dependencies": {
		"drago-texy-toolbar": "file:vendor/drago-ex/texy-toolbar"
	}
}

import TexyToolbar from 'drago-texy-toolbar';

naja.registerExtension(new TexyToolbar);

Mark the textarea with the options of Drago\Texy\TexyToolbar (the preview URL and labels translated by the application's translator) and answer the preview:

$form->addTextArea('content', 'Content')
	->setHtmlAttribute('data-texy-toolbar', $this->texyToolbar->getOptions($this->link('preview!')));

#[Requires(methods: 'POST', ajax: true)]
public function handlePreview(): void
{
	$this->getPresenter()->sendJson($this->texyToolbar->getPreview());
}

For the basic Texy use getBasicOptions() and getBasicPreview(): the toolbar then shows only its buttons. Any buttons can be chosen with the buttons key of the options (bold, italic, heading, list, numbered, quote, link, image, code).

Ctrl+B and Ctrl+I work too. The Czech labels come with the package for drago-ex/translator.

Copy button

A small button in the top right corner of a code block copies the code; it appears when the mouse is over the block. Copying to the clipboard works on HTTPS and localhost.

import { initCopyCode } from 'drago-texy-toolbar/copy-code';

document.addEventListener('DOMContentLoaded', () => initCopyCode({ label: 'Copy' }));

By default it is added to every pre > code; pass selector or root to limit it.

drago-ex / texy-toolbar

Package info

Security

Statistics