retold-content-system 1.0.4 → 1.0.6

package/docs/editor-guide.md

@@ -4,6 +4,8 @@ The content editor is a browser-based application for editing markdown files and
 
 ## Layout
 
+![Editor-Overview](/content/1772209863522-Editor-Overview.png)
+
 The editor has three main areas:
 
 - **Top Bar** -- Shows the application name, current file name, save status, word/character stats, and action buttons (Save, Close).

package/docs/getting-started.md

@@ -2,6 +2,7 @@
 
 The Retold Content System is a local markdown editor and documentation viewer. Install it once with npm and point it at any folder of markdown files.
 
+
 ## Installation
 
 Install globally from npm:
@@ -12,6 +13,8 @@ npm install -g retold-content-system
 
 This gives you two equivalent CLI commands: `retold-content-system` and `rcs`.
 
+![Editor Overview](1772209863522-Editor-Overview.png)
+
 ## Quick Start
 
 Create a folder with some markdown files and serve it:
@@ -33,6 +36,7 @@ The server starts on a random port between 7000 and 7999 and prints the URLs for
 
 Open the **Reader** URL for a pict-docuserve documentation viewer, or the **Editor** URL for the full editing environment.
 
+
 ## Choosing a Port
 
 Pass `-p` to pin the server to a specific port:
@@ -41,6 +45,7 @@ Pass `-p` to pin the server to a specific port:
 rcs serve -p 8080
 ```
 
+
 ## Pointing at a Different Folder
 
 Provide a content path as the first argument:
@@ -51,6 +56,7 @@ rcs serve ~/projects/my-wiki
 
 If the target directory has a `content/` subfolder, the server uses that automatically. This means running `rcs serve` from a project root that has a `content/` directory does the right thing without extra arguments.
 
+
 ## What Gets Served
 
 The content system sets up three static routes and several API endpoints:
@@ -66,6 +72,7 @@ The content system sets up three static routes and several API endpoints:
 | `/api/content/save/*` | File content save API |
 | `/api/content/upload-image` | Image upload endpoint |
 
+
 ## Next Steps
 
 - Read the [Editor Guide](editor-guide.md) for a walkthrough of the editing UI

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "retold-content-system",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"description": "Retold Content System - Markdown content viewer and editor",
 	"main": "source/Pict-ContentSystem-Bundle.js",
 	"bin": {
@@ -43,7 +43,7 @@
 		"pict-section-code": "^1.0.3",
 		"pict-section-content": "^0.0.8",
 		"pict-section-filebrowser": "^0.0.2",
-		"pict-section-markdowneditor": "^1.0.1",
+		"pict-section-markdowneditor": "^1.0.3",
 		"pict-service-commandlineutility": "^1.0.19",
 		"pict-view": "^1.0.67"
 	},

package/server.js

@@ -21,7 +21,6 @@ let tmpPort = parseInt(process.env.PORT, 10) || 8086;
 libSetupServer(
 	{
 		ContentPath: libPath.join(__dirname, 'content'),
-		UploadPath: libPath.join(__dirname, 'uploads'),
 		DistPath: libPath.join(__dirname, 'web-application'),
 		Port: tmpPort
 	},
@@ -36,7 +35,6 @@ libSetupServer(
 		pServerInfo.Fable.log.info(`  Retold Content System running on http://localhost:${pServerInfo.Port}`);
 		pServerInfo.Fable.log.info('==========================================================');
 		pServerInfo.Fable.log.info(`  Content path: ${libPath.join(__dirname, 'content')}`);
-		pServerInfo.Fable.log.info(`  Upload path:  ${libPath.join(__dirname, 'uploads')}`);
 		pServerInfo.Fable.log.info(`  Reader:       http://localhost:${pServerInfo.Port}/`);
 		pServerInfo.Fable.log.info(`  Editor:       http://localhost:${pServerInfo.Port}/edit.html`);
 		pServerInfo.Fable.log.info('==========================================================');

package/source/Pict-Application-ContentEditor.js

@@ -46,9 +46,45 @@ class ContentEditorApplication extends libPictApplication
 		tmpFileBrowserConfig.DefaultState.Layout = 'list-only';
 		this.pict.addView('Pict-FileBrowser', tmpFileBrowserConfig, libPictSectionFileBrowser);
 
-		// Register the list detail sub-view for the file list pane
-		this.pict.addView('Pict-FileBrowser-ListDetail',
-			libPictSectionFileBrowser.PictViewListDetail.default_configuration,
+		// Register the list detail sub-view for the file list pane.
+		// Override templates to:
+		//   - Add a "create folder" button to the breadcrumb bar
+		//   - Add a hover-visible "+" insert button on each file row
+		let tmpListDetailConfig = JSON.parse(JSON.stringify(
+			libPictSectionFileBrowser.PictViewListDetail.default_configuration));
+		for (let i = 0; i < tmpListDetailConfig.Templates.length; i++)
+		{
+			if (tmpListDetailConfig.Templates[i].Hash === 'FileBrowser-ListDetail-Container-Template')
+			{
+				tmpListDetailConfig.Templates[i].Template = /*html*/`
+<div class="pict-fb-detail" id="Pict-FileBrowser-DetailList">
+	<div class="pict-fb-breadcrumb-bar">
+		<div class="pict-fb-breadcrumb" id="Pict-FileBrowser-Breadcrumb"></div>
+		<button class="pict-fb-breadcrumb-addfolder" onclick="pict.PictApplication.promptNewFolder()" title="New folder">+</button>
+	</div>
+	<div class="pict-fb-detail-header">
+		<div class="pict-fb-detail-header-cell pict-fb-detail-col-name" onclick="pict.views['{~D:Record.ViewHash~}'].sortBy('Name')">Name</div>
+		<div class="pict-fb-detail-header-cell pict-fb-detail-col-size" onclick="pict.views['{~D:Record.ViewHash~}'].sortBy('Size')">Size</div>
+		<div class="pict-fb-detail-header-cell pict-fb-detail-col-modified" onclick="pict.views['{~D:Record.ViewHash~}'].sortBy('Modified')">Modified</div>
+	</div>
+	<div id="Pict-FileBrowser-DetailRows"></div>
+</div>
+`;
+			}
+			if (tmpListDetailConfig.Templates[i].Hash === 'FileBrowser-ListDetail-Row-Template')
+			{
+				tmpListDetailConfig.Templates[i].Template = /*html*/`
+<div class="pict-fb-detail-row{~D:Record.SelectedClass~}" data-index="{~D:Record.Index~}" data-name="{~D:Record.Name~}" onclick="{~D:Record.ClickHandler~}" ondblclick="{~D:Record.DblClickHandler~}">
+	<span class="pict-fb-detail-icon">{~D:Record.Icon~}</span>
+	<span class="pict-fb-detail-name">{~D:Record.Name~}</span>
+	<span class="pict-fb-detail-size">{~D:Record.SizeFormatted~}</span>
+	<span class="pict-fb-detail-modified">{~D:Record.ModifiedFormatted~}</span>
+	<button class="pict-fb-insert-btn" onclick="event.stopPropagation(); pict.PictApplication.insertFileReference(this.parentElement.getAttribute('data-name'))" title="Insert into editor">+</button>
+</div>
+`;
+			}
+		}
+		this.pict.addView('Pict-FileBrowser-ListDetail', tmpListDetailConfig,
 			libPictSectionFileBrowser.PictViewListDetail);
 	}
 
@@ -81,7 +117,7 @@ class ContentEditorApplication extends libPictApplication
 			// Settings
 			AutoSegmentMarkdown: false,
 			AutoSegmentDepth: 1,
-			AutoContentPreview: false,
+			AutoContentPreview: true,
 			MarkdownEditingControls: true,
 			MarkdownWordWrap: true,
 			CodeWordWrap: false,
@@ -689,13 +725,32 @@ class ContentEditorApplication extends libPictApplication
 				let tmpEditorView = tmpSelf.pict.views['ContentEditor-MarkdownEditor'];
 				if (tmpEditorView)
 				{
+					// Set the image base URL so relative image references
+					// resolve through the /content/ static route.
+					let tmpImageBase = '/content/';
+					let tmpLastSlash = pFilePath.lastIndexOf('/');
+					if (tmpLastSlash > 0)
+					{
+						tmpImageBase = '/content/' + pFilePath.substring(0, tmpLastSlash) + '/';
+					}
+					tmpEditorView.options.ImageBaseURL = tmpImageBase;
+
 					tmpEditorView.render();
 					tmpEditorView.marshalToView();
 
-					// Apply the Auto Content Preview setting via the
-					// library's own toggle so the per-segment button
-					// continues to work.
-					tmpEditorView.togglePreview(tmpSelf.pict.AppData.ContentEditor.AutoContentPreview);
+					// Always ensure the global preview class is clear so
+					// per-segment toggles work.
+					tmpEditorView.togglePreview(true);
+
+					// Set per-segment preview visibility based on the
+					// Auto Content Preview setting.  We must always loop
+					// to clear any stale _hiddenPreviewSegments state
+					// from previous file loads.
+					let tmpShowPreviews = !!tmpSelf.pict.AppData.ContentEditor.AutoContentPreview;
+					for (let tmpIdx in tmpEditorView._segmentEditors)
+					{
+						tmpEditorView.toggleSegmentPreview(parseInt(tmpIdx, 10), tmpShowPreviews);
+					}
 
 					// Apply the Editing Controls setting (line numbers
 					// and right sidebar) via the library's toggleControls.
@@ -1007,6 +1062,126 @@ class ContentEditorApplication extends libPictApplication
 		}
 	}
 
+	/**
+	 * Prompt the user for a folder name and create it in the current
+	 * browse location via the server API.
+	 */
+	promptNewFolder()
+	{
+		let tmpFolderName = prompt('Enter a name for the new folder:');
+		if (!tmpFolderName || !tmpFolderName.trim())
+		{
+			return;
+		}
+		tmpFolderName = tmpFolderName.trim();
+
+		// Build the full relative path inside the current browse location
+		let tmpCurrentLocation = '';
+		if (this.pict.AppData.PictFileBrowser && this.pict.AppData.PictFileBrowser.CurrentLocation)
+		{
+			tmpCurrentLocation = this.pict.AppData.PictFileBrowser.CurrentLocation;
+		}
+		let tmpPath = tmpCurrentLocation
+			? (tmpCurrentLocation + '/' + tmpFolderName)
+			: tmpFolderName;
+
+		let tmpSelf = this;
+
+		fetch('/api/content/mkdir',
+		{
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ Path: tmpPath })
+		})
+			.then((pResponse) => pResponse.json())
+			.then((pData) =>
+			{
+				if (pData && pData.Success)
+				{
+					tmpSelf.log.info(`Folder created: ${tmpPath}`);
+					// Refresh the file list to show the new folder
+					tmpSelf.loadFileList();
+				}
+				else
+				{
+					alert('Could not create folder: ' + (pData ? pData.Error : 'Unknown error'));
+				}
+			})
+			.catch((pError) =>
+			{
+				alert('Error creating folder: ' + pError.message);
+			});
+	}
+
+	/**
+	 * Insert a file reference into the active markdown editor segment.
+	 *
+	 * Called from the "+" button on file browser rows.  For image files
+	 * this inserts markdown image syntax; for other files a markdown link.
+	 *
+	 * @param {string} pFilename - The filename to insert
+	 */
+	insertFileReference(pFilename)
+	{
+		if (!pFilename)
+		{
+			return;
+		}
+
+		let tmpEditorView = this.pict.views['ContentEditor-MarkdownEditor'];
+		if (!tmpEditorView || this.pict.AppData.ContentEditor.ActiveEditor !== 'markdown')
+		{
+			return;
+		}
+
+		// Determine the active segment (the one with focus, or the last one)
+		let tmpSegmentIndex = tmpEditorView._activeSegmentIndex;
+		if (tmpSegmentIndex < 0)
+		{
+			// Fall back to the first segment
+			let tmpIndices = tmpEditorView._getOrderedSegmentIndices();
+			if (tmpIndices.length > 0)
+			{
+				tmpSegmentIndex = tmpIndices[0];
+			}
+		}
+		if (tmpSegmentIndex < 0)
+		{
+			return;
+		}
+
+		// Build alt text from the filename (strip extension and timestamp prefix)
+		let tmpAltText = pFilename.replace(/\.[^.]+$/, '');
+		tmpAltText = tmpAltText.replace(/^\d{10,}-/, '');
+		tmpAltText = tmpAltText.replace(/[-_]+/g, ' ').trim() || 'image';
+
+		// Check if this is an image file
+		let tmpExt = pFilename.substring(pFilename.lastIndexOf('.')).toLowerCase();
+		let tmpImageExts = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp', '.avif', '.apng', '.ico', '.tiff', '.tif', '.jfif'];
+
+		if (tmpImageExts.indexOf(tmpExt) >= 0)
+		{
+			// Insert markdown image syntax — relative filename resolved by ImageBaseURL
+			tmpEditorView._insertImageMarkdown(tmpSegmentIndex, pFilename, tmpAltText);
+		}
+		else
+		{
+			// Insert a markdown link for non-image files
+			let tmpEditor = tmpEditorView._segmentEditors[tmpSegmentIndex];
+			if (tmpEditor)
+			{
+				let tmpInsert = '[' + tmpAltText + '](' + pFilename + ')';
+				let tmpCursorPos = tmpEditor.state.selection.main.head;
+				tmpEditor.dispatch(
+				{
+					changes: { from: tmpCursorPos, insert: tmpInsert },
+					selection: { anchor: tmpCursorPos + tmpInsert.length }
+				});
+				tmpEditor.focus();
+			}
+		}
+	}
+
 	/**
 	 * Handle F4 / Cmd+Shift+T: context-aware topic creation.
 	 *

package/source/cli/ContentSystem-Server-Setup.js

@@ -6,7 +6,6 @@
  *
  * @param {object} pOptions
  * @param {string} pOptions.ContentPath  - Absolute path to the markdown content folder
- * @param {string} pOptions.UploadPath   - Absolute path to the uploads folder
  * @param {string} pOptions.DistPath     - Absolute path to the built web-application folder
  * @param {number} pOptions.Port         - HTTP port to listen on
  * @param {Function} fCallback           - Callback(pError, { Fable, Orator, Port })
@@ -84,7 +83,6 @@ function sanitizeFilename(pName)
 function setupContentSystemServer(pOptions, fCallback)
 {
 	let tmpContentPath = pOptions.ContentPath;
-	let tmpUploadPath = pOptions.UploadPath;
 	let tmpDistFolder = pOptions.DistPath;
 	let tmpPort = pOptions.Port;
 
@@ -93,18 +91,11 @@ function setupContentSystemServer(pOptions, fCallback)
 		Product: 'Retold-Content-System',
 		ProductVersion: require('../../package.json').version,
 		APIServerPort: tmpPort,
-		ContentPath: tmpContentPath,
-		UploadPath: tmpUploadPath
+		ContentPath: tmpContentPath
 	};
 
 	let tmpFable = new libFable(tmpSettings);
 
-	// Ensure the uploads directory exists
-	if (!libFs.existsSync(tmpUploadPath))
-	{
-		libFs.mkdirSync(tmpUploadPath, { recursive: true });
-	}
-
 	// Ensure the content directory exists
 	if (!libFs.existsSync(tmpContentPath))
 	{
@@ -156,6 +147,57 @@ function setupContentSystemServer(pOptions, fCallback)
 					return fNext();
 				});
 
+			// --- POST /api/content/mkdir ---
+			// Create a new folder inside the content directory.
+			// Body: { Path: "relative/path/to/new-folder" }
+			tmpServiceServer.post('/api/content/mkdir',
+				(pRequest, pResponse, fNext) =>
+				{
+					try
+					{
+						let tmpRawPath = (pRequest.body && pRequest.body.Path) ? pRequest.body.Path : null;
+						let tmpSafePath = sanitizePath(tmpRawPath);
+
+						if (!tmpSafePath)
+						{
+							pResponse.send(400, { Success: false, Error: 'Invalid folder path.' });
+							return fNext();
+						}
+
+						let tmpFullPath = libPath.join(tmpContentPath, tmpSafePath);
+
+						// Ensure the resolved path is within the content directory
+						let tmpRealContent = libFs.realpathSync(tmpContentPath);
+						let tmpTargetParent = libPath.dirname(tmpFullPath);
+						if (libFs.existsSync(tmpTargetParent))
+						{
+							tmpTargetParent = libFs.realpathSync(tmpTargetParent);
+						}
+						if (!tmpTargetParent.startsWith(tmpRealContent))
+						{
+							pResponse.send(403, { Success: false, Error: 'Access denied.' });
+							return fNext();
+						}
+
+						if (libFs.existsSync(tmpFullPath))
+						{
+							pResponse.send(409, { Success: false, Error: 'Folder already exists.' });
+							return fNext();
+						}
+
+						libFs.mkdirSync(tmpFullPath, { recursive: true });
+
+						tmpFable.log.info(`Folder created: ${tmpSafePath}`);
+						pResponse.send({ Success: true, Path: tmpSafePath });
+					}
+					catch (pError)
+					{
+						tmpFable.log.error(`Folder creation failed: ${pError.message}`);
+						pResponse.send(500, { Success: false, Error: pError.message });
+					}
+					return fNext();
+				});
+
 			// --- GET /api/content/read/* ---
 			// Read the raw markdown content of a file
 			tmpServiceServer.get('/api/content/read/*',
@@ -350,39 +392,7 @@ function setupContentSystemServer(pOptions, fCallback)
 					return fNext();
 				});
 
-			// --- GET /api/content/uploads ---
-			// List uploaded images
-			tmpServiceServer.get('/api/content/uploads',
-				(pRequest, pResponse, fNext) =>
-				{
-					try
-					{
-						let tmpFiles = libFs.readdirSync(tmpUploadPath);
-						let tmpFileList = tmpFiles.map(
-							(pFilename) =>
-							{
-								let tmpStat = libFs.statSync(libPath.join(tmpUploadPath, pFilename));
-								return (
-								{
-									Filename: pFilename,
-									URL: `/uploads/${pFilename}`,
-									Size: tmpStat.size,
-									Modified: tmpStat.mtime
-								});
-							});
-						pResponse.send({ Success: true, Files: tmpFileList });
-					}
-					catch (pError)
-					{
-						pResponse.send(500, { Success: false, Error: pError.message });
-					}
-					return fNext();
-				});
-
-			// Serve uploaded images at /uploads/
-			tmpOrator.addStaticRoute(`${tmpUploadPath}/`, 'index.html', '/uploads/*', '/uploads/');
-
-			// Serve content markdown files at /content/ (for the reader)
+			// Serve content files (markdown, images, etc.) at /content/
 			tmpOrator.addStaticRoute(`${tmpContentPath}/`, 'index.html', '/content/*', '/content/');
 
 			// Serve the built application from dist/ (main static route)

package/source/cli/commands/ContentSystem-Command-Serve.js

@@ -38,7 +38,6 @@ class ContentSystemCommandServe extends libCommandLineCommand
 		}
 
 		let tmpDistPath = libPath.resolve(__dirname, '..', '..', '..', 'web-application');
-		let tmpUploadPath = libPath.join(tmpContentPath, 'uploads');
 		let tmpPortOption = parseInt(this.CommandOptions.port, 10);
 		let tmpPort = (tmpPortOption > 0) ? tmpPortOption : (7000 + Math.floor(Math.random() * 1000));
 
@@ -56,19 +55,12 @@ class ContentSystemCommandServe extends libCommandLineCommand
 			this.log.info(`Created content directory: ${tmpContentPath}`);
 		}
 
-		// Ensure uploads directory exists
-		if (!libFs.existsSync(tmpUploadPath))
-		{
-			libFs.mkdirSync(tmpUploadPath, { recursive: true });
-		}
-
 		let tmpSelf = this;
 		let tmpSetupServer = require('../ContentSystem-Server-Setup.js');
 
 		tmpSetupServer(
 			{
 				ContentPath: tmpContentPath,
-				UploadPath: tmpUploadPath,
 				DistPath: tmpDistPath,
 				Port: tmpPort
 			},
@@ -85,10 +77,6 @@ class ContentSystemCommandServe extends libCommandLineCommand
 				tmpSelf.log.info(`  Retold Content System running on http://localhost:${pServerInfo.Port}`);
 				tmpSelf.log.info('==========================================================');
 				tmpSelf.log.info(`  Content: ${tmpContentPath}`);
-				tmpSelf.log.info(`  Uploads: ${tmpUploadPath}`);
-				tmpSelf.log.info(`  Assets:  ${tmpDistPath}`);
-				tmpSelf.log.info(`  Reader:  http://localhost:${pServerInfo.Port}/`);
-				tmpSelf.log.info(`  Editor:  http://localhost:${pServerInfo.Port}/edit.html`);
 				tmpSelf.log.info('==========================================================');
 				tmpSelf.log.info('');
 				tmpSelf.log.info('  Press Ctrl+C to stop.');

package/source/providers/Pict-Provider-ContentEditor.js

@@ -160,31 +160,6 @@ class ContentEditorProvider extends libPictProvider
 			});
 	}
 
-	/**
-	 * List uploaded images.
-	 *
-	 * @param {Function} fCallback - Callback receiving (error, filesArray)
-	 */
-	listUploads(fCallback)
-	{
-		let tmpCallback = (typeof (fCallback) === 'function') ? fCallback : () => {};
-
-		fetch('/api/content/uploads')
-			.then((pResponse) => pResponse.json())
-			.then((pData) =>
-			{
-				if (pData && pData.Success)
-				{
-					return tmpCallback(null, pData.Files || []);
-				}
-				return tmpCallback(pData ? pData.Error : 'Unknown error', []);
-			})
-			.catch((pError) =>
-			{
-				this.log.warn(`ContentEditor: Error listing uploads: ${pError}`);
-				return tmpCallback(pError.message, []);
-			});
-	}
 }
 
 module.exports = ContentEditorProvider;