Failed to import Markdown

/Applications/Inkdro…g/src/common.js:114 app:error Notification: +9m Failed to import the Markdown file 
Object
detail: "ReferenceError: Cutter is not defined"
dismissable: true
__proto__: Object

Let me know if you want a copy of the Markdown for reproduction. It was 6 files total.

Actually, I can repro it with just one.

Mac OS 10.15.x
Inkdrop 5.2.0

Here is the file (Write your first JavaScript program!.md):

Write your first JavaScript program!


Here’s what we will be building!


What is JavaScript?

JavaScript started as a client side language for the web. It allows websites to be interactive. It has become very popular and even runs on the server now (node).


Why JavaScript?

It works on most devices, is inherently open and free, and gives you immediate feedback.


Intro to the syntax:

JavaScript’s syntax comes from the C language, here’s a sample:

var addTwo = function (x) {
    return x + 2;
};

addTwo(5);
// => 7

Let’s write something!

Head to https://repl.it and pick JavaScript.


Enter this in the left pane, then click Run:

console.log('Hello world!');

It is customary to write Hello world! as your first program in any new language.


But we can do better than that, let’s write something that adds a set of numbers!

var numbers = [
    1,
    2,
    3,
    4,
    5
];

var twoBetter = numbers.map(function (number) {
    return number + 2;
});

console.log(numbers);
console.log(twoBetter);

What was all that? Let’s break it down:

  1. We declared an Array ([]) of numbers.
var numbers = [
    1,
    2,
    3,
    4,
    5
];

What is an Array?


An Array is a list of items, use it for working with numbers or sets of anything. It is useful for looping.


  1. We mapped over our Array of numbers and created a new Array (twoBetter), containing the same numbers with 2 added to each.
var twoBetter = numbers.map(function (number) {
    return number + 2;
});

  1. Then we logged our results to the console:
console.log(numbers);
console.log(twoBetter);

Questions?


Now let’s build some JavaScript to work on a web page. Open a text editor!

Let’s create a folder called donuts.


First we’ll create some HTML:

<!doctype html>
<html>
<head>
    <title>
    Donut budget-ator!
    </title>
</head>

<body>
    <img src="https://clbin.com/fyzlUw.jpg">
    <div>
        <label>Number of donuts:</label>
        <input class="donuts">
        <label>Dollars per donut:</label>
        <input class="donut_price">
    </div>

    <div>
        <label>Your cost:</label>
        <span class="donut_cost"></span>
    </div>  

    <button class="calculate_donut_cost">
        How much?
    </button>

    <script src="donuts.js"></script>
</body>

</html>

Save this as donuts.html.


Now we need some JavaScript to add magic to our page!

window.addEventListener('load', function () {

    var donuts = document.querySelector(
        '.donuts');
    var donutPrice = document.querySelector(
        '.donut_price');
    var donutCost = document.querySelector(
        '.donut_cost');
    var calculateButton = document.querySelector(
        '.calculate_donut_cost');

    calculateButton.addEventListener('click',
        function () {
            donutCost.textContent = (
                donuts.value * donutPrice.value
            ) + ' bucks.';
        }
    );
});

What does all that stuff mean?


document is available from our web browser. It refers to the HTML document, and allows us to interact with the page.


We add an event listener to window called load, that happens when all assets have fully loaded.


Now we query for some elements to work with and set those to variables:

var donuts = document.querySelector(
    '.donuts');
var donutPrice = document.querySelector(
    '.donut_price');
var donutCost = document.querySelector(
    '.donut_cost');
var calculateButton = document.querySelector(
    '.calculate_donut_cost');

querySelector finds an element in the document, this way we can do stuff with it.


Then we add a click listener to our button, so that we can define what happens when the user clicks it.

calculateButton.addEventListener('click', function () {

And then we do our magic, that calculates the cost of the donuts! We access the textContent of our donutCost element and set that equal to the number of donuts (donuts.value) times the price of donuts (donutPrice.value). We append the word bucks to the end of that string (using +).

    donutCost.textContent =
        (donuts.value * donutPrice.value) + ' bucks.';

Now we have a working webpage! Open donuts.html in any web browser to experience the greatness.

Good job!


Questions?



How do I fix broken JavaScript?


The first step in debugging an application is finding out what happens each step of the way. Let’s do this with our interactive page.


One of the easiest ways is to convert all of our var declarations into global variables, which means replacing var with window.:

var foo = 'bar';

With:

window.foo = 'bar';

Keep in mind that this should only be done temporarily! Global variables are bad news!


Once you have a global variable you can access it in the devtools console of your browser:

Devtools console


This allows you to type out JavaScript and receive real-time feedback on it.


So we will change:

var donuts = document.querySelector(
    '.donuts');
var donutPrice = document.querySelector(
    '.donut_price');
var donutCost = document.querySelector(
    '.donut_cost');
var calculateButton = document.querySelector(
    '.calculate_donut_cost');

To:

window.donuts = document.querySelector(
    '.donuts');
window.donutPrice = document.querySelector(
    '.donut_price');
window.donutCost = document.querySelector(
    '.donut_cost');
window.calculateButton = document.querySelector(
    '.calculate_donut_cost');

Now we can try our calculations in the browser. Type this into the console:

donuts.value * donutPrice.value


What about es6?


Let’s rewrite our JavaScript to use all the cool stuff:


document.addEventListener('DOMContentLoaded', () => {
    'use strict'

    const donuts = document.querySelector(
        '.donuts')
    const donutPrice = document.querySelector(
        '.donut_price')
    const donutCost = document.querySelector(
        '.donut_cost')
    const calculateButton = document.querySelector(
        '.calculate_donut_cost')

    calculateButton.addEventListener('click',
        () => {
            donutCost.textContent =
                `${donuts.value * donutPrice.value} bucks.`
        }
    )
})

We added the event listener to document instead of window this time. And used an event called, DOMContentLoaded, which happens when the document is constructed rather than when all assets are loaded.

Meaning our code gets executed sooner!


We also used arrow functions and template literal syntax!


You are awesome!

ryanpcmcquen

(GitHub/IRC)


1 Like

Hi Ryan,

Thank you for reporting it.
Fixed it in this commit: https://github.com/inkdropapp/inkdrop-import-utils/commit/a389e0b420dc780a11e0ac3209e70fe1d76fff84
To be landed in the next release!

1 Like

Yay!

Landed in v5.2.1:raised_hands:
Thanks again for reporting!

2 Likes