pict-section-code

A code editor and syntax highlighter view for the Pict ecosystem, wrapping CodeJar.

Features

• Full-featured code editing with undo, auto-indent, and bracket closing
• Read-only mode for syntax-highlighted code display
• Built-in highlighting for JavaScript, JSON, HTML, CSS, and SQL
• Plug in custom highlighter functions (Prism.js, highlight.js, etc.)
• Line numbers with automatic updates
• Two-way data binding to Pict AppData addresses
• Configurable tab handling, indent patterns, and closing behavior

Installation

npm install pict-section-code

Quick Start

const libPictApplication = require('pict-application');
const libPictSectionCode = require('pict-section-code');

class MyEditorView extends libPictSectionCode
{
	constructor(pFable, pOptions, pServiceHash)
	{
		super(pFable, pOptions, pServiceHash);
	}
}

class MyApp extends libPictApplication
{
	constructor(pFable, pOptions, pServiceHash)
	{
		super(pFable, pOptions, pServiceHash);
		this.pict.addView('EditorView',
			{
				"TargetElementAddress": "#MyEditorContainer",
				"Language": "javascript",
				"LineNumbers": true,
				"DefaultCode": "// Hello World\nconsole.log('Hello!');\n"
			},
			MyEditorView);
	}

	onAfterInitialize()
	{
		super.onAfterInitialize();
		this.pict.views.EditorView.render();
	}
}

module.exports = MyApp;

In your HTML, include a container element and the required scripts:

<div id="MyEditorContainer"></div>
<script src="codejar.js"></script>
<script src="pict.min.js"></script>
<script src="my-app.min.js"></script>

Note: CodeJar is an ESM-only library. For script-tag usage, wrap it in an IIFE that exposes window.CodeJar. See the example applications for a ready-made codejar.js wrapper.

Documentation

Full documentation is available in the docs/ directory:

• Getting Started -- Installation and first editor
• Configuration -- Complete options reference
• API Reference -- All public methods
• Syntax Highlighting -- Built-in languages and custom highlighters
• Examples -- Three working example applications

Example Applications

| Example | Description | |---------|-------------| | Code Editor | Single editor with language switching and read-only toggle | | Code Display | Read-only syntax-highlighted blocks in all five languages | | Multi-File Editor | Sidebar file browser with auto language detection |

Build any example:

cd example_applications/<example_name>
npm install
npm run build
# Open dist/index.html in a browser

API Overview

| Method | Description | |--------|-------------| | getCode() | Get current code content | | setCode(pCode) | Set code content | | setLanguage(pLanguage) | Change syntax highlighting language | | setReadOnly(pReadOnly) | Toggle read-only mode | | setHighlightFunction(fn) | Use a custom highlight function | | destroy() | Clean up the editor instance | | marshalToView() | Load code from data address | | marshalFromView() | Save code to data address |

Testing

npm test
npm run coverage

Related Packages

• pict -- Core MVC framework
• pict-view -- Base view class
• pict-application -- Application lifecycle
• fable -- Service provider and dependency injection

License

MIT

Contributing

Pull requests are welcome. For major changes, please open an issue first.