finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Editor preview support for external renderers (#23333)

Browse source 
Remove `[repository.editor] PREVIEWABLE_FILE_MODES` setting that seemed
like it was intended to support this but did not work. Instead, whenever
viewing a file shows a preview, also have a Preview tab in the file
editor.

Add new `/markup` web and API endpoints with `comment`, `gfm`,
`markdown` and new `file` mode that uses a file path to determine the
renderer.

Remove `/markdown` web endpoint but keep the API for backwards and
GitHub compatibility.

## ⚠️ BREAKING ⚠️

The `[repository.editor] PREVIEWABLE_FILE_MODES` setting was removed.
This setting served no practical purpose and was not working correctly.
Instead a preview tab is always shown in the file editor when supported.

---------

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
Brecht Van Lommel 2023-03-24 07:12:23 +01:00 • committed by GitHub
parent 9e04627aca
commit 84daddc2fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 389 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web_src/js/features/codeeditor.js
View file

@ -130,17 +130,17 @@ function getFileBasedOptions(filename, lineWrapExts) {
};
}
export async function createCodeEditor(textarea, filenameInput, previewFileModes) {
export async function createCodeEditor(textarea, filenameInput) {
const filename = basename(filenameInput.value);
const previewLink = document.querySelector('a[data-tab=preview]');
const markdownExts = (textarea.getAttribute('data-markdown-file-exts') || '').split(',');
const previewableExts = (textarea.getAttribute('data-previewable-extensions') || '').split(',');
const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(',');
const isMarkdown = markdownExts.includes(extname(filename));
const previewable = previewableExts.includes(extname(filename));
const editorConfig = getEditorconfig(filenameInput);
if (previewLink) {
if (isMarkdown && (previewFileModes || []).includes('markdown')) {
const newUrl = (previewLink.getAttribute('data-url') || '').replace(/(.*)\/.*/i, `$1/markdown`);
if (previewable) {
const newUrl = (previewLink.getAttribute('data-url') || '').replace(/(.*)\/.*/i, `$1/markup`);
previewLink.setAttribute('data-url', newUrl);
previewLink.style.display = '';
} else {

7
web_src/js/features/repo-editor.js
View file

@ -5,18 +5,16 @@ import {createCodeEditor} from './codeeditor.js';
import {hideElem, showElem} from '../utils/dom.js';
const {csrfToken} = window.config;
let previewFileModes;
function initEditPreviewTab($form) {
const $tabMenu = $form.find('.tabular.menu');
$tabMenu.find('.item').tab();
const $previewTab = $tabMenu.find(`.item[data-tab="${$tabMenu.data('preview')}"]`);
if ($previewTab.length) {
previewFileModes = $previewTab.data('preview-file-modes').split(',');
$previewTab.on('click', function () {
const $this = $(this);
let context = `${$this.data('context')}/`;
const mode = $this.data('markdown-mode') || 'comment';
const mode = $this.data('markup-mode') || 'comment';
const treePathEl = $form.find('input#tree_path');
if (treePathEl.length > 0) {
context += treePathEl.val();
@ -27,6 +25,7 @@ function initEditPreviewTab($form) {
mode,
context,
text: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val(),
file_path: treePathEl.val(),
}, (data) => {
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
$previewPanel.html(data);
@ -147,7 +146,7 @@ export function initRepoEditor() {
if (!$editArea.length) return;
(async () => {
const editor = await createCodeEditor($editArea[0], $editFilename[0], previewFileModes);
const editor = await createCodeEditor($editArea[0], $editFilename[0]);
// Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
// to enable or disable the commit button