TiddlyWiki / TiddlyWiki5

A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.
https://tiddlywiki.com/
Other
7.98k stars 1.18k forks source link

Discussion: Default behavior of line breaks #443

Closed Spangenhelm closed 9 years ago

Spangenhelm commented 10 years ago

Hello everybody,

First of all thanks to @drsprite who pointed out the carriage return behavior, you can find the first discussion here: https://github.com/Jermolene/TiddlyWiki5/issues/275

I'm opening this one today to see if we can discuss about how the default behavior should be:

1) When typing regular text and you hit "return" key once it does nothing (like now in 5.0.7 version) you have to hit it twice to actually "jump" a line. You cannot do a simple carriage return without the use of paragraphs/code blocks/hard line breaks.

2) When you hit "return" key once it would do a simple carriage return like in any regular text editor without the need of paragraphs/code blocks/hard line breaks.

It seems like the same thing happened within <$list> it always leaves one empty line between two other (or is it a padding issue something like that?). Anyway it is taking more place than needed imo.

First we have to ask @Jermolene if it is even possible and then see if the majority of users is interested in changing default behavior or if they would rather leave it the way it is.

Thank you for your attention, +++ Spangenhelm +++

Lioric commented 6 years ago

I'm currently using:

.tc-tiddler-body {
    white-space: pre-line;
}

.tc-tiddler-preview-preview {
    white-space: pre-line;
}

If buttons or other widgets need paragraphs to be rendered correctly I will modify them to remove the dependency, so they are displayed correctly in the tiddler contents area.

But this should not affect the UI or any area other than the tiddler contents

carugnom commented 6 years ago

Sorry... where do you write that code ? Thanks !

2018-02-25 0:33 GMT-03:00 Lioric notifications@github.com:

I'm currently using:

.tc-tiddler-body { white-space: pre-line; }

.tc-tiddler-preview-preview { white-space: pre-line; }

If buttons or other widgets need paragraphs to be rendered correctly I will modify them to remove the dependency, so they are displayed correctly in the tiddler contents area.

But this should not affect the UI or any other area than the tiddler contents

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Jermolene/TiddlyWiki5/issues/443#issuecomment-368280238, or mute the thread https://github.com/notifications/unsubscribe-auth/ACnC9sKT_UD5Z98OMtTz6XQK2m1F0hQoks5tYNSggaJpZM4BlBOG .

Lioric commented 6 years ago

The simpler way is to create a tiddler with the tag $:/tags/Stylesheet and put those styles there

Lioric commented 6 years ago

Finally I did find some time to test several implementation to support newlines in a natural writing style.

The idea is to touch as less code paths as possible (we are looking to switching to a TW5 mainline instance and refactor our modifications to the outside or push our changes in mainline)

So far this is working nicely with my dataset (I'm sure there are lots of corner cases, though):

TextNodeWidget.prototype.render = function(parent,nextSibling) {
    this.parentDomNode = parent;
    this.computeAttributes();
    this.execute();
    var text = this.getAttribute("text",this.parseTreeNode.text || "");
    text = text.replace(/\r/mg,"");

    var textNode = this.document.createTextNode(text);

+    if(text && text !== '\n' && parent.nodeName === "P") {
+        var domNode = this.document.createElement("span");
+        domNode.style.whiteSpace = "pre-line";
+        domNode.appendChild(textNode);
+        textNode = domNode;
+    }

    parent.insertBefore(textNode,nextSibling);
    this.domNodes.push(textNode);
};

From Jermolene: Even if we removed the p tags from the sidebar, user content that included widgets within a paragraph would also end up with extraneous linebreaks.

It works on the text block directly inside paragraphs and thus should not interfere with text inside other widgets, or widgets inside paragraphs on user content

carugnom commented 6 years ago

Yessssss it worked !!!

So many time asking for this and finally 5 lines of code made it work !

Thank you !!!

2018-02-25 20:25 GMT-03:00 Lioric notifications@github.com:

Finally I did find some time to test several implementation to support newlines in a natural writing style.

The idea is to touch as less code paths as possible (we are looking switch to a TW5 mainline instance and refactor our modifications to the outside or push our changes in mainline)

So far this is working nicely with my dataset (I'm sure there are lots of corner cases, though):

TextNodeWidget.prototype.render = function(parent,nextSibling) { this.parentDomNode = parent; this.computeAttributes(); this.execute(); var text = this.getAttribute("text",this.parseTreeNode.text || ""); text = text.replace(/\r/mg,"");

var textNode = this.document.createTextNode(text);
  • if(text && text !== '\n' && parent.nodeName === "P") {+ var domNode = this.document.createElement("span");+ domNode.style.whiteSpace = "pre-line";+ domNode.appendChild(textNode);+ textNode = domNode;+ }

    parent.insertBefore(textNode,nextSibling); this.domNodes.push(textNode); };

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Jermolene/TiddlyWiki5/issues/443#issuecomment-368355140, or mute the thread https://github.com/notifications/unsubscribe-auth/ACnC9r232lhXLsEi9YlIWYb7OLkWQsBPks5tYevbgaJpZM4BlBOG .

PengjuYan commented 5 years ago

I'm currently using:

.tc-tiddler-body {
    white-space: pre-line;
}

.tc-tiddler-preview-preview {
    white-space: pre-line;
}

Thank you @Lioric, I've been looking for this for years (!!) and it seems working well (I'll see whether there any side effects).

PengjuYan commented 5 years ago

I'm currently using:

.tc-tiddler-body {
    white-space: pre-line;
}

.tc-tiddler-preview-preview {
    white-space: pre-line;
}

If buttons or other widgets need paragraphs to be rendered correctly I will modify them to remove the dependency, so they are displayed correctly in the tiddler contents area.

But this should not affect the UI or any area other than the tiddler contents

Unfortunately, it DOES has side effects. My control panel looks like this now:

Screen Shot 2019-07-27 at 8 40 02 PM
pmario commented 5 years ago

also see: https://tiddlywiki.com/#Hard%20Linebreaks%20with%20CSS%20-%20Example:%5B%5BHard%20Linebreaks%20with%20CSS%20-%20Example%5D%5D%20%5B%5BHard%20Linebreaks%20with%20CSS%5D%5D

PengjuYan commented 5 years ago

also see: https://tiddlywiki.com/#Hard%20Linebreaks%20with%20CSS%20-%20Example:%5B%5BHard%20Linebreaks%20with%20CSS%20-%20Example%5D%5D%20%5B%5BHard%20Linebreaks%20with%20CSS%5D%5D

Thank you very much @pmario, that's exactly what I want!

I guess the next mission for me is to find a way to automatically remove all the ''' from my poem tiddlers. Any clues?

twMat commented 5 years ago

I guess the next mission for me is to find a way to automatically remove all the ''' from my poem tiddlers. Any clues?

@PengjuYan The easiest way is probably to open the wiki file in an external editor, e.g Notepad++ and do a search for that string and replace with "nothing" or some row break character.

PengjuYan commented 5 years ago

@twMat Thank you. That's probably the easiest way.

pmario commented 5 years ago

@PengjuYan ... BUT make backups first!! ;)

defterade commented 4 years ago

I've been pulling my hairs out trying to get this to work by default on all newly created tiddlers without having to add additional text or breaking other UI elements. My use-case is similar to that of @FrinalFrantasy, and I'm not willing to change the way I write my notes for such a seemingly trivial issue. It's the only thing stopping me from using TiddlyWiki.

Finally I did find some time to test several implementation to support newlines in a natural writing style.

This appears to work perfectly. No UI issues so far. Thank you!

For others: you need to add those 6 lines to $:/core/modules/widgets/text.js. Don't forget to remove the pluses at the beginning of each line.