Coder Social home page Coder Social logo

chuangcaleb / obsidian-fountain-editor Goto Github PK

View Code? Open in Web Editor NEW
31.0 3.0 2.0 1.23 MB

Obsidian plugin for formatting Fountain screenplay syntax in the editor

Home Page: https://obsidian.md/plugins?id=fountain-editor

License: MIT License

JavaScript 15.29% TypeScript 44.49% CSS 40.22%
editor fountain fountain-editor fountain-language markdown obsidian obsidian-md obsidian-plugin screenplay storyteller

obsidian-fountain-editor's Introduction

Fountain Editor - Obsidian Plugin

Obsidian plugin for Fountain (screenplay) syntax highlighting in the editor.

banner

πŸ“Ί Youtube Demo: Obsidian Fountain - Live Editor (Plugin Showcase)


πŸ”¨ Usage

🏁 Quickstart

  1. πŸ“₯ Click HERE to open the installation page in Obsidian.
    1. General installation instructions Link β†’
    2. Manual installation Link β†’
  2. πŸ“„ Create a new file and just add cssclasses: fountain to the frontmatter metadata Properties.
  3. 🎨 You will get automatic syntax highlighting/styling according to the Fountain syntax rules!
---
cssclasses:
  - fountain
---
# Opening Hook

> THE STINK LINK <

FADE TO:

EXT. PUBLIC RESTROOM - DAY

A POLICE OFFICER steps into a dingy restroom. She winces.

POLICE OFFICER (V.O.)
I *smell* a rat...

= Use Fountain's Synopsis to escape into [[regular markdown]]! #so-cool

πŸ’Ώ Manual Installation

  1. πŸ†• You may install directly with BRAT using the link of this repo (https://github.com/chuangcaleb/obsidian-fountain-editor).
  2. πŸ“€ You can also go to the repo's Latest Releases page and manually download the obsidian-fountain-editor-[version].zip file, then extract it into your .obsidian/plugin directory!

πŸ“’ Notice

  1. πŸŽ‰ We're past functional MVP v1.0.0! You may start using this plugin professionally and safely. Just keep in mind that there are still pending optimizations and incomplete features.
  2. πŸ›Ÿ That said, this plugin should only extend your view & should never modify any local files! Worst case scenario if something breaks, just force restart your Obsidian or manually remove this plugin from your community-plugins.json list.

🎯 Goals

πŸ“

Make Obsidian a competitive option among Fountain writing editors.

πŸ”— The main selling point is to be able to connect/link/annotate your helper notes directly with your screenplay, at the exact location where you referenced it, by allowing Markdown links/tags/extended syntax.
🀞 The 2nd selling point is to integrate the Fountain screenwriting workflow with all of Obsidian's ecosystem that fosters idea-exploration and knowledge-management (Plus, psssst, it's FREE).
🧩 In a similar vein, certain Obsidian plugins can add sorely missing features in your Fountain screenplay writing workflow. The chief missing jigsaw piece that bothers me is that Fountain requires all your content in a single file β€” which can get tedious when you have 120+ pages. There's an Obsidian plugin solution for this, and likely one for any problem.
πŸ”Ž Competition does not mean lack of cooperation! As explained in our design principle of scope, this plugin will try to not do double-work if possible, and will try to outsource/handover features to other Synergistic Tools!

✨ Features

  • 🎨 Get Fountain syntax highlighting in Editing View (Source mode or Live Preview)!
  • βœ… Specify which individual notes get Fountain styling with cssclasses: fountain in your frontmatter (opt-in basis, subject to change)
  • πŸ› Enjoy extended Obsidian syntax where possible β€” bring your regular Obsidian markdown, tools, plugins, and workflow!
    • 🧰 Leverage Obsidian!Markdown: Use Links, Tags, Embedded Notes / Images / Audio, Graph...
    • πŸ›οΈ Feel at home: Fountain's Section and Emphasis syntax don't add new styles β€” which means they'll look like familiar Obsidian Headings and inline text styles!
    • πŸͺ“ Opt-out into regular Obsidian!Markdown syntax highlighting with Fountain's Synopsis token!
  • 🀝 Combine with your favorite Obsidian community plugins like Longform!
  • πŸ”§ Fine-tune the styling using CSS variables with the format --fountain--*... see base.css for the exposed CSS variables!
  • πŸ§‘β€πŸ’» Hack in missing features β€” with Obsidian's open-contribution development, there'll be no more "it would've been perfect, if only they had x feature"!

πŸ“– See Design Guidelines to understand our implementation!


🀝 Synergistic Tools

πŸ“– Explore Synergistic Tools for details on how they work together with this plugin!


πŸ’ Contributing

πŸ‘€ Overview

😎 Don't know how to code? You can contribute

  • πŸͺ² Report bugs on the Issue tab!
  • πŸ“£ Share (the link to) this plugin around on forums and channels and with your friends!
    • 🌟 Star this repo to receive updates & help raise awareness β€” if this project has been worth one button click to you!
  • πŸ—£οΈ Engage with others in the Discussions tab!
  • ✍🏼 Create a screenplay project using this plugin!
    • πŸ“Έ Showcase your work of how you took advantage of mixing the best of Fountain + Obsidian. Then I can reuse your examples in promotions, and maybe get inspiration for new features too! hehe
  • 🎨 You can find a link to the Figma design file for the icon here!

πŸ€“ Know how to code? You can contribute too

  • πŸ”€ Open a Pull Request! Focus on critical bugs and priority features first.
  • πŸͺ² Report a bug β€” but with your specialized technical diagnosis!
  • 🫱 Send some advice! Not just a first-time Obsidian plugin dev, but my first public community project.

πŸ’ See Contributing for proper technical details!

πŸ€™ Contact

The General - Discussions tab is a neat place you can just tag me in, because you also invite anyone from the community to join in the conversation! It's also better for keeping the context scoped within this project/repo.

If you want a more personal DM'ing (or just to send a private note of thanks!), you can reach me on Discord#chuangcaleb! You can also reach out by email to [email protected]!


πŸ”ƒ Related Projects

  • Darakah/obsidian-fountain: Obsidian plugin to edit, write and render Fountain Writing Syntax for screenplays and scripts
    • Formats Fountain syntax, just like this plugin
    • But for preview mode only, and must be wrapped in a code block
    • 2.5 years+ old project
  • chuangcaleb/ffluent: CLI to bundle atomic Fountain screenplay files
    • My attempt to replicate longform but for Fountain files, as a CLI.
    • Uses a json/yaml file at each folder directory to configure a custom sequence! So you can have complex folder organization structures
    • Marked as abandoned since this project, but it may be of interest to you!
  • Highland 2
    • Made by the creator of Fountain.
    • Features its own text editor app, WYSIWYG, "Revision Mode" and analysis tools.
    • Since everything is wrapped in a nice bow, it's probably the best Fountain-writing app if you're not technical.

obsidian-fountain-editor's People

Contributors

chuangcaleb avatar wesleyboar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

obsidian-fountain-editor's Issues

CSS preprocessing step

Describe the task
Preprocess CSS stylesheets for dx

Actually we don't need to have a full build pipeline for js since we already are using esbuild.

Blockers

Expected behavior

  • prefix with .fountain
  • integrate into #8 Deployment pipeline

Remove conflicting existing markdown formatting classes, overriding them

The Problem

There are Conflicts between Obsidian-flavored Markdown vs Fountain.

For the > Centred Text < and > Forced Transition Fountain token, Obsidian's standard blockquote token is still detected (since it is a > character that starts a line) and so there are unwanted/conflicting HTML classes being applied (these being cm-formatting-quote cm-formatting-quote-1 cm-quote cm-quote-1 as seen in the screenshot below).

Screenshot 2024-01-29 at 3 28 03β€―PM

Then Fountain's _Underlined Text_ and /* Boneyard */ tokens conflict with Obsidian's native _Italicised Text_ and * Leading-Asterisk Italicised Text formatting tokens.

The Solution

There are at least two ways to solve this:

Overload(?) Obsidian's native markdown formatting

This is the strategy used for this plugin so far: Obsidian-Fountain-Editor is a superset of Obsidian-flavoured Markdown, so we just add styles on top of existing markdown styles. This is good, because we don't need to reinvent inline boldface, section headings, etc. so it makes sense to continue with this

But when it comes to conflicts where we want Obsidian's regular Markdown to be suppressed (like asterisk italicising), we will have to undo those applied HTML classes.

This may be a lot of funky coding with CodeMirror (which is really complex) and may leave a problematically-HTML-structured CodeMirror document (think weird excessive nested span elements)

Disable Obsidian's native markdown formatting

The other option is to modify the standard markdown processor to prevent triggering certain markdown styles like underscore-italicising, so that our plugin can swoop in and cleanly format underscore-wrapped-text as underlined text.

This is definitely trickier as I don't know of a way to disable core behaviour, much less disable it only for particular documents (remember, other notes should get Obsidian's native markdown formatting as normal). And they probably use some lesser-known efficient low-level parser (like Lezer) (I'm using simple regex!) that may also be locked behind closed-source.

But this definitely is the superior long-term strategy, since (1) it makes for a cleaner HTML DOM, which means cleaner CSS targeting (2) finer-tuned CodeMirror control; especially if there's an API to easily + directly style certain tokens, then that also instantly fixes #11.

Task

  • - blockquote
  • - underline
  • - boneyard

Mobile CSS styling

Describe the task

Handle styling for mobile. Make sure utility classes fountain-left and fountain-center don't affect using :not(is-mobile).

Linked Issues

Expected behavior

  • [ ]

Screenshots

Additional context

Style Settings

  • file width / alignment
    • (Unset - Full-width, Constrained - Left, Constrained - Center)

πŸ› Characters with accented names not detected as the character token

Describe the bug

If a characher has an accent in their name, it is not detected as a character.

What's the expected result?

If a character's name is written in cap locks, but contains an accent (ex: Γ‰TIENNE), it will not be centered as well as the subsequent dialogue.

Steps to reproduce the behavior

write :

Γ‰TIENNE
Hello, my name is Γ‰tienne.

and you will see the problem.

Fountain Editor - Plugin Version

v1.1.1

Obsidian Version

v1.5.3

What environment are you seeing the problem on?

  • MacOS
  • Windows
  • Linux
  • Android
  • iOS

Participation

  • I am willing to submit a pull request for this issue.

Settings: Toggle hide whitespace in live margin

Describe the task

Setting, if live margins, to display: none for whitespace characters

Linked Issues

  • RELATED: #num
  • BLOCKED BY: #15
  • BLOCKS: #num

Expected behavior

  • Setting True: While live margins, whitespace is hidden in editor
  • Setting False: While live margins, whitespace is shown in editor

Screenshots

Additional context

Token: Character extensions are parsed as dialogue parentheticals

Describe the bug

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior

Screenshots

Environment

  • Plugin Version: 1.10.3
  • Obsidian Version: [e.g. v1.14.3]
  • Device: [e.g. MacOS, Windows, Android, iOS]

Additional context

Settings: Toggle Live Margins

Describe the task

Configuration setting for left-aligned or live margins (borrowing the term from Highland 2)

Linked Issues

  • RELATED: #num
  • BLOCKED BY: #num
  • BLOCKS: #19

Expected behavior

  • Live Preview: Live Margins (bool)
  • Source Mode: Live Margins (bool)

Screenshots

Additional context

Deployment pipeline

To build and attach the binaries on each new tag created.
Probably create with GitHub Actions?

πŸ› Courier Prime font used for regular markdown text

Describe the bug

In the sample image on the GitHub page, the "regular" markdown text (not fountain syntax) is shown in default font while the fountain text is in courier.

In my file, all body text is rendered in courier.

What's the expected result?

Expect body text that is not fountain syntax to be rendered in default font.

Steps to reproduce the behavior

no special steps needed.

Fountain Editor - Plugin Version

No response

Obsidian Version

No response

What environment are you seeing the problem on?

  • MacOS
  • Windows
  • Linux
  • Android
  • iOS

Participation

  • I am willing to submit a pull request for this issue.

πŸ› Fountain-formatting stops working after rendering certain embeds

Describe the bug

In Live Preview, when inactiv-ating a line with a certain type of embed, the Fountain formatting stops working. There seems to be no way to bring the formatting back, until you close and reopen the note.

Embed types that don't break

  • most note transclusions
  • png images

Embed types that break:

  • audio files
  • file not found
  • canvas
  • jpg images

When opening the file again, formatting works β€” but when making that embed line active and then inactive again, formatting breaks.

What's the expected result?

The Fountain-formatting should persist in a fountain-configured note, no matter what the text content may be

Steps to reproduce the behavior

  1. Assign cssclasses: fountain to a note
  2. Type in some generic Fountain content, which should get detected and formatted
  3. Insert an embed type from the list above
  4. Make that line inactive by focusing/selecting somewhere else
  5. Formatting stops working

Fountain Editor - Plugin Version

v1.1.1

Obsidian Version

v1.4.16

What environment are you seeing the problem on?

  • MacOS
  • Windows
  • Linux
  • Android
  • iOS

Participation

  • I am willing to submit a pull request for this issue.

"Fountain + Longform" Tutorial

Describe the task

Write documentation for details and tips using Fountain with the Longform plugin.

Blocking

Expected behavior

  • intro to longform
  • sample Compile workflow, essentials/defaults
    • Strip Metadata
    • Save as Note to save as .fountain
  • Use cases
    • Remove Comments to write markdown
    • Remove Links to use links in Fountain text

Screenshots

Additional context

Token: Page break / hr to hook into Obsidian's thematicBreak

Describe the task

Turn Fountain page breaks into hr's.

However, Obsidian's Codemirror extension does some funny things to replace the hr with a Decoration.widget completely. Let's try to hook into their existing logic, rather than coding a brand new one from scratch.

  • Investigate if it is possible to hook into Obsidian's logic

Blocking

Expected behaviour

  • Source
  • Live preview
  • non-active line: will behaves just like native Obsidian hr
  • active line: goes back to "source" text

Screenshots

Additional context

Skip frontmatter during Fountain parsing

Describe the task

When iterating thorough line-by-line,
if the first line is a triple-hyphen frontmatter opening,
then skip parsing until we hit the next triple-hyphen

Linked Issues

  • BLOCKED BY: #6

Expected behavior

  • When console.logging each line as it processes, the frontmatter lines should be exclued.

Screenshots

Additional context

Token: Dual Dialogue

Describe the task

Dual Dialogue in Live Preview

Linked Issues

Expected behavior

  • [ ]

Screenshots

Additional context

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.