diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..e03fb97 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,53 @@ +# Changelog + +All notable changes to OverType will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [1.1.0] - 2024-08-18 + +### Added +- Gmail/Google Docs style link tooltips - cursor in link shows clickable URL tooltip (#4) +- Tab key support - inserts 2 spaces, supports multi-line indent/outdent with Shift+Tab (#3) +- Comprehensive "Limitations" section in README documenting design constraints (#5) +- @floating-ui/dom dependency for tooltip positioning + +### Fixed +- Inline code with underscores/asterisks no longer incorrectly formatted (#2, PR #6 by @joshdoman) +- Code elements now properly inherit font-size, preventing alignment breaks (#1) +- Tab key no longer causes focus loss and cursor misalignment (#3) + +### Changed +- Links now use tooltip interaction instead of Cmd/Ctrl+Click (better UX) +- README limitations section moved below Examples for better flow +- Build size increased to 73KB minified (from 45KB) due to Floating UI library + +### Contributors +- Josh Doman (@joshdoman) - Fixed inline code formatting preservation + +## [1.0.6] - 2024-08-17 + +### Added +- Initial public release on Hacker News +- Core transparent textarea overlay functionality +- Optional toolbar with markdown formatting buttons +- Keyboard shortcuts for common markdown operations +- Solar (light) and Cave (dark) themes +- DOM persistence and recovery +- Mobile optimization +- Stats bar showing word/character count + +### Features at Launch +- 👻 Invisible textarea overlay for seamless editing +- 🎨 Global theming system +- ⌨️ Keyboard shortcuts (Cmd/Ctrl+B for bold, etc.) +- 📱 Mobile optimized with responsive design +- 🔄 DOM persistence aware (works with HyperClay) +- 🚀 Lightweight ~45KB minified +- 🎯 Optional toolbar +- ✨ Smart shortcuts with selection preservation +- 🔧 Framework agnostic + +[1.1.0]: https://github.com/panphora/overtype/compare/v1.0.6...v1.1.0 +[1.0.6]: https://github.com/panphora/overtype/releases/tag/v1.0.6 \ No newline at end of file diff --git a/LICENSE b/LICENSE index d90880f..1a37919 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 Demo User +Copyright (c) 2025 David Miranda Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index dbd0688..3680a78 100644 --- a/README.md +++ b/README.md @@ -383,6 +383,27 @@ Check the `examples` folder for complete examples: - `custom-theme.html` - Theme customization - `dynamic.html` - Dynamic creation/destruction +## Limitations + +Due to the transparent textarea overlay approach, OverType has some intentional design limitations: + +### Images Not Supported +Images (`![alt](url)`) are not rendered. Variable-height images would break the character alignment between textarea and preview. + +### Monospace Font Required +All text must use a monospace font to maintain alignment. Variable-width fonts would cause the textarea cursor position to drift from the visual text position. + +### Fixed Font Size +All content must use the same font size. Different sizes for headers or other elements would break vertical alignment. + +### Visible Markdown Syntax +All markdown formatting characters remain visible (e.g., `**bold**` shows the asterisks). This is intentional - hiding them would break the 1:1 character mapping. + +### Links Require Modifier Key +Links are clickable with Cmd/Ctrl+Click only. Direct clicking would interfere with text editing since clicks need to position the cursor in the textarea. + +These limitations are what enable OverType's core benefits: perfect native textarea behavior, tiny size, and zero complexity. + ## Development ```bash @@ -431,6 +452,11 @@ OverType uses a unique invisible textarea overlay approach: - Textarea content drives everything - One-way data flow: textarea → parser → preview +## Contributors + +Special thanks to: +- [Josh Doman](https://github.com/joshdoman) - Fixed inline code formatting preservation ([#6](https://github.com/panphora/overtype/pull/6)) + ## License MIT diff --git a/demo.html b/demo.html index 36bc59d..0969533 100644 --- a/demo.html +++ b/demo.html @@ -12,8 +12,11 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace; + background: #000; + color: #fff; + font-size: 14px; + line-height: 1.6; min-height: 100vh; padding: 20px; } @@ -21,44 +24,15 @@ .hero { text-align: center; color: white; - padding: 40px 20px; + padding: 30px 20px 40px; max-width: 1200px; margin: 0 auto; } - .hero h1 { - font-size: 3.5rem; - font-weight: 700; - margin-bottom: 10px; - text-shadow: 2px 2px 4px rgba(0,0,0,0.2); - } - .hero .tagline { - font-size: 1.3rem; - opacity: 0.95; - margin-bottom: 30px; - } - - .features { - display: flex; - gap: 30px; - justify-content: center; - flex-wrap: wrap; - margin-bottom: 40px; - } - - .feature { - display: flex; - align-items: center; - gap: 8px; - padding: 10px 20px; - background: rgba(255,255,255,0.15); - border-radius: 25px; - backdrop-filter: blur(10px); - } - - .feature-icon { - font-size: 1.2rem; + font-size: 1rem; + opacity: 0.7; + margin-top: 10px; } .demo-container { @@ -74,35 +48,33 @@ .demo-container { grid-template-columns: 1fr; } - .hero h1 { - font-size: 2.5rem; - } } .demo-section { - background: white; - border-radius: 16px; - box-shadow: 0 20px 60px rgba(0,0,0,0.3); + background: #0a0a0a; + border: 1px solid #333; + border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .demo-header { - padding: 20px; - background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); - color: white; + padding: 15px 20px; + background: #111; + color: #fff; + border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; } .demo-header h2 { - font-size: 1.3rem; - font-weight: 600; - display: flex; - align-items: center; - gap: 10px; + font-size: 14px; + font-weight: normal; + text-transform: uppercase; + letter-spacing: 1px; + opacity: 0.9; } .demo-controls { @@ -112,19 +84,20 @@ .btn { padding: 6px 12px; - background: rgba(255,255,255,0.2); - border: 1px solid rgba(255,255,255,0.3); - color: white; - border-radius: 6px; + background: transparent; + border: 1px solid #666; + color: #fff; + border-radius: 4px; cursor: pointer; - font-size: 0.85rem; + font-size: 12px; transition: all 0.2s; - backdrop-filter: blur(10px); + font-family: inherit; } .btn:hover { - background: rgba(255,255,255,0.3); - transform: translateY(-1px); + background: #fff; + color: #000; + border-color: #fff; } .editor-wrapper { @@ -132,385 +105,174 @@ position: relative; } - - - .floating-controls { + .theme-toggle { position: fixed; bottom: 30px; right: 30px; - display: flex; - flex-direction: column; - gap: 10px; z-index: 1000; - } - - .fab { - width: 56px; - height: 56px; - border-radius: 50%; - background: white; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - display: flex; - align-items: center; - justify-content: center; + padding: 10px 15px; + background: #4251de; + border: 1px solid #1b257d; + color: #fff; + border-radius: 4px; cursor: pointer; - transition: all 0.3s; - font-size: 1.5rem; - border: none; - } - - .fab:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(0,0,0,0.2); - } - - .fab.primary { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - } - - .modal { - display: none; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0,0,0,0.5); - z-index: 2000; - align-items: center; - justify-content: center; - padding: 20px; - } - - .modal.active { - display: flex; - } - - .modal-content { - background: white; - border-radius: 12px; - padding: 30px; - max-width: 600px; - width: 100%; - max-height: 80vh; - overflow-y: auto; - } - - .modal h3 { - margin-bottom: 20px; - color: #333; - } - - .shortcuts-grid { - display: grid; - gap: 10px; - } - - .shortcut { - display: flex; - justify-content: space-between; - padding: 10px; - background: #f8f9fa; - border-radius: 6px; - } - - .shortcut kbd { - background: white; - padding: 2px 6px; - border: 1px solid #ddd; - border-radius: 3px; - font-family: monospace; - font-size: 0.9rem; - } - - .theme-selector { - display: flex; - gap: 10px; - margin-top: 15px; - } - - .theme-option { - flex: 1; - padding: 15px; - border: 2px solid #e0e0e0; - border-radius: 8px; - cursor: pointer; - text-align: center; + font-size: 12px; + font-family: inherit; + text-transform: uppercase; + letter-spacing: 0.5px; transition: all 0.2s; } - .theme-option:hover { - border-color: #667eea; - transform: translateY(-2px); - } - - .theme-option.active { - border-color: #667eea; - background: #f0f4ff; - } - - .sync-banner { - position: fixed; - top: 0; - left: 0; - right: 0; - background: #4caf50; - color: white; - padding: 10px; - text-align: center; - transform: translateY(-100%); - transition: transform 0.3s; - z-index: 3000; - } - - .sync-banner.show { - transform: translateY(0); + .theme-toggle:hover { + background: #fff; + color: #000; + border-color: #fff; } .github-link { - position: fixed; + position: absolute; top: 20px; right: 20px; - background: white; - padding: 10px 20px; - border-radius: 25px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + color: #fff; text-decoration: none; - color: #333; - display: flex; - align-items: center; - gap: 8px; - transition: all 0.2s; - z-index: 100; + opacity: 0.7; + transition: opacity 0.2s; + font-size: 12px; } .github-link:hover { - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0,0,0,0.15); + opacity: 1; } - - - - - View on GitHub - + View on GitHub →
-

✨ OverType

-

A lightweight markdown editor with perfect WYSIWYG alignment

- -
-

- We overlap an invisible textarea on top of styled output, giving the illusion of editing styled text using a plain textarea. -

-
- -
-
- 🎯 - Perfect Alignment -
-
- 🎨 - Themeable -
-
- 📱 - Mobile Ready -
-
- 🚀 - 21KB Minified -
-
- 🔧 - Zero Dependencies -
-
+ OverType +

Interactive Demo - Try all the features

+
+
+

Main Editor

+
+ + +
+
+
+
+

Live Preview

+
+ +
+
+
+
+

Notes

+
+ +
+
+
-
-
-
- -
- - -
- -
- ✅ All editors synchronized! -
- -